四种简单易懂的方法：用HTML、CSS和JS制作轮播图
最编程
2024-07-22 15:15:10
...
HTML+CSS +JS实现轮播图
轮播图能够自动播放，当点击左右箭头时可以手动切换图片；当鼠标移入圆点时，自动播放停止，显示当前图片；当鼠标移出圆点时，图片又从当前图片开始自动播放；当鼠标点击圆点时，可以手动切换图片；图片的播放是循环的。
一、使用全局变量实现轮播图
1、布局——HTML + CSS
首先，在页面放一个整体的大盒子，在大盒子中装几个小盒子，分别用于放图片、左右点击箭头、底部切换的圆点。
<div id="box">
<!-- 放图片-->
<div id="lunboimg">
<a href="#">
<!-- 仅放一张图片，通过JS来改变图片地址即可，也可以放多个a标签，在每个a标签中放图片-->
<img src="img/0.jpg" />
</a>
</div>
<!-- 放底部圆点-->
<div id="selector">
<span id=""></span>
<span id=""></span>
<span id=""></span>
<span id=""></span>
</div>
<!-- 左箭头-->
<div id="left"><</div>
<!-- 右箭头-->
<div id="right">></div>
对添加的盒子设置合适的样式即可
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、代码详解
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
<style type="text/css">
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
#box {
width: 200px;
height: 200px;
overflow: hidden;
position: relative;
}
#lunboimg {
width: 200px;
height: 200px;
position: absolute;
display: flex;
}
a {
height: 200px;
width: 200px;
}
img {
width: 200px;
height: 200px;
margin: 0;
}
#box:hover #selector {
display: flex;
}
#selector {
width: 80px;
height: 20px;
position: absolute;
bottom: 0;
left: 60px;
display: none;
justify-content: space-between;
z-index: 100;
}
#selector>span {
width: 15px;
height: 15px;
border-radius: 50%;
background-color: lightsalmon;
opacity: 0.8;
margin-right: 5px;
cursor: pointer;
}
#selector>span:hover {
background-color: #8A8A8A;
}
#left,#right{
width: 20px;
height: 20px;
position: absolute;
top: 90px;
background-color: lightsteelblue;
font-size: 18px;
border-radius: 50%;
text-align: center;
line-height: 100%;
cursor: pointer;
color: lightslategray;
}
#left{
left: 0;
}
#right{
right: 0;
}
#left:hover,#right:hover{
background-color: #8A8A8A;
color: #FFFFFF;
}
</style>
</head>
<body>
<div id="box">
<!-- 放图片-->
<div id="lunboimg">
<a href="#">
<!-- 仅放一张图片，通过JS来改变图片地址即可-->
<img src="img/0.jpg" />
</a>
</div>
<!-- 放底部圆点-->
<div id="selector">
<span id=""></span>
<span id=""></span>
<span id=""></span>
<span id=""></span>
</div>
<!-- 左箭头-->
<div id="left"><</div>
<!-- 右箭头-->
<div id="right">></div>
</div>
<script type="text/javascript">
let img = document.querySelector('img');
let span = document.querySelectorAll('span');
let left = document.getElementById('left');
let right = document.getElementById('right');
let index = 0;
let timer;
function show(){
img.src = `img/${index}.jpg`;
}
function autoPlay() {
timer = setInterval(function() {
if (index == span.length) {
index = 0;
}
show();
index++;
}, 1000);
}
autoPlay();
function ctrlPlay(){
for(let i = 0; i < span.length; i++){
span[i].onclick = function(){
index = i;
show();
}
}
}
ctrlPlay();
function clickPlay(){
left.onclick = function(){
if(index <= 0){
index = span.length - 1;
}else{
index --;
}
show();
}
right.onclick = function(){
if(index == span.length){
index = 0;
}
index ++;
show();
}
}
clickPlay();
function eventList(){
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);
}
}
eventList();
</script>
</body>
</html>
二、使用构造函数实现轮播图
1、布局——HTML + CSS
首先，在页面放一个整体的大盒子，在大盒子中装几个小盒子，分别用于放图片、左右点击箭头、底部切换的圆点。
<div id="box">
<!-- 放图片-->
<div id="lunboimg">
<a href="#">
<!-- 仅放一张图片，通过JS来改变图片地址即可，也可以放多个a标签，在每个a标签中放图片-->
<img src="img/0.jpg" />
</a>
</div>
<!-- 放底部圆点-->
<div id="selector">
<span id=""></span>
<span id=""></span>
<span id=""></span>
<span id=""></span>
</div>
<!-- 左箭头-->
<div id="left"><</div>
<!-- 右箭头-->
<div id="right">></div>
对添加的盒子设置合适的样式即可
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，让监听在页面加载时开始监听
}