JS实现轮播图效果（有详细注释）
轮播图
这个代码是博主在学到DOM节点的属性和⽅法后写的，还没有学习事件，所以可能会有些复杂，但对于初学者可以⽤来学习逻辑思路。JS代码如下，有详细注释，html和css都是很基础的代码，也放在⽂章末尾了。
效果展⽰：
（图⽚来源⽹络，打开后刚开始轮播时可能会有的卡，是因为图⽚有点⼤，加载慢，多加载⼀会⼉后刷新就可以正常轮播了）
JS
//获取图⽚地址（⾃⾏更改）
let imgArr =['./img/1.jpg','./img/2.jpg','./img/3.jpg','./img/4.jpg','./img/5.jpg','./img/6.jpg'];
//只有轮播效果，⽴即执⾏函数
(function(){
let i =0;
setInterval(
function(){
i++;
i == imgArr.length ? i =0:"";
},1500
);
})();
//有轮播效果，并且能选择到某张图⽚
for(let index in imgArr){
let doteEle = ElementsByClassName("dote")[0];
doteEle.innerHTML +=`<span οnclick="lun(${index})"></span>`;//创建圆点
}
let j;//声明j（必须在轮播函数外声明，才能使⽤停⽌时间函数）
//轮播函数，要传参
function lun(i){
let spEle = ElementsByClassName("dote")[0].children;//获取圆点
//判断传参的i，如果是next，即下⼀张
if(i =="next"){
for(let index in imgArr){//遍历所有的圆点（遍历圆点相当于在遍历图⽚）
if(spEle[imgArr.length -1].style.backgroundColor =="white"){//如果最后⼀个圆点的背景⾊为⽩⾊，即当前展⽰的图⽚是最后⼀张
i =0;//则让i=0，即下标变为了0，然后从49⾏开始执⾏，就从第⼀张开始展⽰
}
else if(spEle[index].style.backgroundColor =="white"){//如果下标为index的圆点背景⾊为⽩⾊，即当前展⽰的图⽚是下标为index的图⽚
//则让i=index+1，但index是字符串，所有要先-0，让它的数据类型隐式转换为number；
//即下标变成了当前图⽚的下⼀张，然后从第49⾏开始执⾏
i = index -0+1;
}
}
}
//判断传参的i，如果是previous，即上⼀张，同下⼀张的写法
if(i =="previous"){
for(let index in imgArr){
if(spEle[0].style.backgroundColor =="white"){
i = imgArr.length -1;
}
else if(spEle[index].style.backgroundColor =="white"){
i = index -1;
}
}
}
for(let index in imgArr){//先遍历所有点，让所有点的背景颜⾊变成默认的
spEle[index].style.backgroundColor ="rgba(255, 255, 255, 0.5)";
}
clearInterval(j);//每次调⽤前先停⽌时间函数
//展⽰下标为i的图⽚（必须在进⾏时间函数前先展⽰传参进来的下标为i的图⽚，
//因为时间函数是先等⼀个时间再进⾏执⾏函数，就会出现第⼀张有多的时间展⽰）
spEle[i].style.backgroundColor ="white";//让下标为i的点变颜⾊，即让它选中（同61⾏原因）
//进⾏时间函数，从选中的点的下⼀张开始
j =setInterval(
function(){
for(let index in imgArr){//先遍历所有点，让所有点的背景颜⾊变成默认的
spEle[index].style.backgroundColor ="rgba(255, 255, 255, 0.5)";
}
i++;//从选中的点的下⼀张开始进⾏时间函数，即下标加⼀
i == imgArr.length ? i =0:"";//如果下标等于图⽚数组的长度，就让下标等于0，即展⽰第⼀张            ElementsByClassName("box2")[0].src =`${imgArr[i]}`;//变图⽚
spEle[i].style.backgroundColor ="white";//变点的颜⾊
},1500
)
}
lun(0);//打开⽹页就从下标为0的图⽚开始执⾏轮播函数
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"href="style.css">
<title>轮播图</title>
</head>
<body>
<div>
<h4>只有轮播效果</h4>
<img src="./img/1.jpg"class="box1">
</div>
<div>
<h4>有轮播效果，并且能选择到某张图⽚</h4>
<span class="jianleft"onclick="lun('previous')"><</span>
<span class="jianright"onclick="lun('next')">></span>
<img src="./img/1.jpg"class="box2">
<div class="dote"></div>
</div>
<script src="lunbo.js"></script>
</body>
</html>
CSS
div{
width: 512px;
margin: auto;
position: relative;
}
img{
width: 512px;
height: 288px;
vertical-align: bottom;
}
.dote{
position: absolute;
bottom: 0;
height: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.dote>span{
display: inline-block;
height: 10px;
width: 10px;
border-radius: 50%;
margin: 2px;
}
span[class^="jian"]{
position: absolute;
top:50%;
margin-top: -50%;
display: inline-block;
height: 50px;
width: 50px;
border-radius: 50%;
margin: 2px;
background-color:rgba(255, 255, 255, 0.1);
text-align: center;
line-height: 50px;
color: white;
}
.jianleft{
left: 0;js实现轮播图最简代码
}
.
jianright{
right: 0;
}
效果展⽰：
（图⽚来源⽹络，打开后刚开始轮播时可能会有的卡，是因为图⽚有点⼤，加载有点慢，多加载⼀会⼉后刷新就可以正常轮播了）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。