-
HTML+CSS +JS实现轮播图的四种方法
9367 世界杯吧 | 2025-09-23 09:24:42 HTML+CSS +JS实现轮播图
轮播图能够自动播放，当点击左右箭头时可以手动切换图片；当鼠标移入圆点时，自动播放停止，显示当前图片；当鼠标移出圆点时，图片又从当前图片开始自动播放；当鼠标点击圆点时，可以手动切换图片；图片的播放是循环的。
一、使用全局变量实现轮播图
1、布局——HTML + CSS
首先，在页面放一个整体的大盒子，在大盒子中装几个小盒子，分别用于放图片、左右点击箭头、底部切换的圆点。
<>对添加的盒子设置合适的样式即可
2、实现步骤——JS
（1）布局 （2）通过document去获取页面元素。圆点获取后返回数组，用于图片切换时便于得到当前图片地址；获取的img元素，可以通过img.src去改变图片的地址，从而实现页面放置一个img可以实现轮播图。
//获取图片
let img = document.querySelector('img');
//获取圆点
let span = document.querySelectorAll('span');
//获取左边箭头
let left = document.getElementById('left');
//获取右边箭头
let right = document.getElementById('right');
//初始化当前图片下标
let index = 0;
//timer用于获取自动播放轮播图是设置的定时器的返回值
let timer;
（3）设置定时器让轮播图自动播放
//设置定时器并接收返回值，便于停止自动播放
timer = setInterval(function() {
if (index == span.length) {
index = 0;
}
show();
index++;
}, 1000);
（4）设置圆点手动控制切换图片
for(let i = 0; i < span.length; i++){
//为每个小圆点设置点击事件
span[i].onclick = function(){
index = i;
show();
}
}
（5）设置左右箭头手动切换图片
//为左边箭头设置点击事件
left.onclick = function(){
//实现循环
if(index <= 0){
index = span.length - 1;
}else{
index --;
}
show();
}
//为右边箭头设置点击时间
right.onclick = function(){
//当index累加到圆点的数量时，将index置为0，从头开始，实现循环
if(index == span.length){
index = 0;
}
index ++;
show();
}
（6）对小圆点设置鼠标移入移出监听
//为每个小圆点都设置事件监听
for(let i = 0; i < span.length; i++){
//设置鼠标移入监听
span[i].addEventListener('mouseenter',function(){
//清除自动播放效果
clearInterval(timer);
index = i;
//显示当前图片
show();
},false);
//设置鼠标移出监听
span[i].addEventListener('mousemove',function(){
//清除自动播放效果
clearInterval(timer);
//设置鼠标移出后从当前位置开始自动播放
autoPlay();
},false);
}
3、代码详解
轮播图 二、使用构造函数实现轮播图
1、布局——HTML + CSS
首先，在页面放一个整体的大盒子，在大盒子中装几个小盒子，分别用于放图片、左右点击箭头、底部切换的圆点。
<>对添加的盒子设置合适的样式即可
2、实现步骤——JS
（1）布局 （2）写一个构造函数，在构造函数中通过this添加属性：
//获取页面img元素
this.img = document.querySelector('img');
//获取底部点击小圆点
this.span = document.querySelectorAll('span');
//获取左箭头
this.left = document.getElementById('left');
//获取右箭头
this.right = document.getElementById('right');
//初始化小圆点下标
this.index = 0;
//初始化timer，用于接收定时器的返回值，便于停止定时器和打开定时器
this.timer = null;
（3）设置定时器让轮播图自动播放，并将值返回给timer，在给定时器传参时要改变参数函数的this的指向，让this指向构造函数；定时器应该放在构造函数的原型之上的一个方法中，并对该函数改变this指向，让this指向构造函数。
//在原型上创建方法用于然那个轮播图自动播放
PlayImg.prototype.autoPlay = function() {
//查看当前的this
console.log(this);
//设置定时器并将返回值赋给timer保存
this.timer = setInterval(function() {
//让图片循环播放
if (this.index == this.span.length) {
this.index = 0;
}
//显示图片
this.show();
//让图片动起来
this.index++;
}.bind(this), 1000);//改变this指向
}.bind(this);//改变this指向
（4）在构造函数的原型上添加方法用于点击圆点切换图片，通过for循环对每一个小圆点设置点击事件，并对点击事件改变this指向，然那个this总是指向构造函数；再对整个方法改变this指向，让this指向构造函数。
//再原型上添加方法用于点击圆点七日换图片
PlayImg.prototype.pointCtrlPlay = function() {
//查看当前this
console.log(this);
//通过for循环为小圆点一次添加点击事件
for (let i = 0; i < this.span.length; i++) {
this.span[i].onclick = function() {
this.index = i;
this.show();
}.bind(this);//改变this指向
}
}.bind(this);//改变this指向
（5）在构造函数原型上添加方法用于点击左右箭头切换图片。分别对左右箭头设置点击事件，并改变事件的this指向，再对整个方法改变this指向。
//在构造函数原型上添加方法用于点击左右箭头切换图片
PlayImg.prototype.ctrlPlay = function() {
//查看当前this
console.log(this);
//设置左箭头点击事件
this.left.onclick = function() {
if (this.index <= 0) {
this.index = this.span.length - 1;
} else {
this.index--;
}
this.show();
}.bind(this);//改变this指向
//设置右箭头点击事件
this.right.onclick = function() {
if (this.index == this.span.length) {
this.index = 0;
}
this.index++;
this.show();
}.bind(this);//改变this指向
}.bind(this);//改变this指向
（6）为小圆点设置鼠标移入移出事件监听，当鼠标移入某个小圆点时，图片停止自动播放并显示当前图片，当鼠标移出小圆点时，图片从当前开始自动播放。在构造函数上添加方法用于设置监听函数，通过for循环对每个小圆点设置监听，并对监听函数改变this指向，让this一直指向构造函数。
//在原型上添加方法用于监听鼠标移入移出
PlayImg.prototype.eventListener = function() {
//查看当前this指向
console.log(this);
for (let i = 0; i < this.span.length; i++) {
//设置鼠标移入监听'mouseenter'
this.span[i].addEventListener('mouseenter', function() {
//清除定时器
clearInterval(this.timer);
this.index = i;
this.show();
//设置false，让监听在页面加载时开始监听
}.bind(this), false);//改变this指向
//添加鼠标移出监听'mousemove'
this.span[i].addEventListener('mousemove', function() {
//清除定时器
clearInterval(this.timer);
this.show();
//重新打开一个定时器
this.autoPlay();
}.bind(this), false);//改变this指向
}
}.bind(this);//改变this指向
（7）根据构造函数，new一个对象，通过对象去访问构造函数原型上的方法
let play = lunboImg();
//new 一个对象
let r = new play();
//自动播放
r.autoPlay();
//左右箭头切换
r.ctrlPlay();
//小圆点点击切换
r.pointCtrlPlay();
//小圆点鼠标移入移出
r.eventListener();
3、整体效果的代码：
或者不使用bind()来改变this指向，而通过箭头函数去实现：
function lunboImg() {
function PlayImg() {
this.img = document.querySelector('img');
this.span = document.querySelectorAll('span');
this.left = document.getElementById('left');
this.right = document.getElementById('right');
this.index = 0;
this.timer = null;
this.show = () => {
this.img.src = `img/${this.index}.jpg`;
}
PlayImg.prototype.autoPlay = () => {
console.log(this);
this.timer = setInterval(() => {
if (this.index == this.span.length) {
this.index = 0;
}
this.show();
this.index++;
}, 1000);
}
PlayImg.prototype.pointCtrlPlay = () => {
console.log(this);
for (let i = 0; i < this.span.length; i++) {
this.span[i].onclick = () => {
this.index = i;
this.show();
}
}
}
PlayImg.prototype.ctrlPlay = () => {
console.log(this);
this.left.onclick = () => {
if (this.index <= 0) {
this.index = this.span.length - 1;
} else {
this.index--;
}
this.show();
};
this.right.onclick = () => {
if (this.index == this.span.length) {
this.index = 0;
}
this.index++;
this.show();
};
}
PlayImg.prototype.eventListener = () => {
console.log(this);
for (let i = 0; i < this.span.length; i++) {
this.span[i].addEventListener('mouseenter', () => {
clearInterval(this.timer);
this.index = i;
this.show();
}, false);
this.span[i].addEventListener('mousemove', () => {
clearInterval(this.timer);
this.show();
this.autoPlay();
}, false);
}
}
}
return PlayImg;
}
三、js类+模块方法实现轮播图
步骤同上，具体的js代码如下：
classLB.js文件
class ClassLB {
constructor() {
this.img = document.querySelectorAll('.img img');
this.point = document.querySelectorAll('.point li');
this.index = 0;
this.timer = null;
}
show() {
for (let i = 0; i < this.img.length; i++) {
this.img[i].style.display = 'none';
this.point[i].style.backgroundColor = '#fff';
}
this.img[this.index % this.img.length].style.display = 'block';
this.point[this.index % this.point.length].style.backgroundColor = '#f00';
}
autoPlay() {
this.timer = setInterval(() => {
this.index++;
this.show();
}, 1000);
}
pointCtrl() {
for (let i = 0; i < this.length; i++) {
this.point[i].onclick = function() {
this.index = i;
this.show();
}
}
}
lrCtrl() {
document.querySelector(".left").onclick = () => {
if (this.index <= 0) {
this.index = this.img.length - 1
} else {
this.index--;
}
this.show();
}
document.querySelector(".right").onclick = () => {
this.index++;
this.show();
}
}
addEvent() {
for (let i = 0; i < this.point.length; i++) {
this.point[i].addEventListener('mouseenter', () => {
clearInterval(this.timer);
this.index = i;
this.show();
}, false);
this.point[i].addEventListener('mousemove', () => {
clearInterval(this.timer);
this.index = i;
this.show();
this.autoPlay();
}, false);
}
}
}
export default ClassLB;
body中：
四、仅使用css和html实现轮播图
方法一：box-box-ul-li-a-img
轮播图 方法二：box-box-a-img
css文件：
.content-middle{
width: 100%;
overflow: hidden;
position: relative;
height: 260px;
}
.middle-box a{
display: inline-block;
width: 315px;
height: 260px;
}
.middle-box img{
width: 315px;
height: 260px;
}
.middle-box{
width: 3715px;
height: 260px;
position: absolute;
display: flex;
justify-content: space-between;
left: 0;
top: 0;
animation: myanimation2 20s infinite;
}
@keyframes myanimation2 {
0%,5%{
left: 0;
}
10%,15%{
left: -340px;
}
20%,25%{
left: -680px;
}
30%,35%{
left: -1020px;
}
40%,45%{
left: -1360px;
}
50%,55%{
left: -1700px;
}
60%,65%{
left: -2040px;
}
70%,75%{
left: -2380px;
}
80%,85%{
left: -2455px;
}
}
-
余数用c语言如何表示友情链接：
Copyright © 2022 世界杯金靴_足球小子世界杯 - ffajyj.com All Rights Reserved.