【学会轮播图这一篇文章就足够啦】JS 网页轮播图详解 自动播放+手动播放
第五次点击右侧按钮后：
**为什么点击后直接到了第二张图片呢？不是在判断语句里设置了left为0吗？**这是因为判断中设置了num=0和left=0后才自增1，所以这一次点击后带入动画函数的num=1，移动距离为1✖宽度，又开始新一轮循环图片！
代码实现：
num=0;
circlechange=0; //目的为下方点点同步改变时使用，这一步先不用管这个参数
rightbtn.addEventListener(‘click’,function(){
if(num==circleul.children.length-1){
circleul.style.left=0;
num=0;
}
num++;
long=numwindows.offsetWidth-6num;
run(circleul,-long);
我们点击右侧按钮，图片滚动的同时，小圆圈也应该跟着切换才对，该怎么实现呢？
每点击一次都让circlechange这个变量自增，当自增到值和 circleul.children.length-1 的值相等时（即滚动到了克隆过去的最后一张图片），这时让 circlechange 变为 0 即可
circlechange++;
if(circlechange==circleul.children.length-1){
circlechange=0;
}
for(var i=0;i<circleol.children.length;i++){ //排他思想
circleol.children[i].className=‘’;
}
circleol.children[circlechange].className=‘circlecolor’;
})
五：左侧按钮滚动实现 以及 下方点点同步改变
=======================
向左切换和向右切换的原理类似，在此我们只研究第一张图片开始往左无缝衔接最后一张图片的过程
第一次点击左侧按钮后：
代码实现：
leftbtn.addEventListener(‘click’,function(){
if(num==0){
circleul.style.left=(circleul.children.length-1)*windows.offsetWidth;
num=circleul.children.length-1;
}
num–;
long=numwindows.offsetWidth-6num;
run(circleul,-long);
点击左侧按钮，小圆圈跟随切换：
circlechange–;
if(circlechange<0){
circlechange=circleol.children.length-1; //注意此处是ol的子节点的长度-1
}
for(var i=0;i<circleol.children.length;i++){
circleol.children[i].className=‘’;
}
circleol.children[circlechange].className=‘circlecolor’;
})
六：自动播放实现
========
自动播放最简单！，只需要一个自动点击即可
**此处为右侧按钮自动点击：**rightbtn.click()
将其添加在定时器中就可以完成我们的轮播图啦
var timer=setInterval(function(){
rightbtn.click();
},2000)
完整JS代码：
=======
我们的 JS 是单独的一个文件，所以加入了 load 事件等文档流执行完毕后，再执行 JS 的内容
window.addEventListener(‘load’,function(){
var leftbtn=document.querySelector(‘.leftbtn’);
var rightbtn=document.querySelector(‘.rightbtn’);
var windows=document.querySelector(‘.windows’);
var circleul=document.querySelector(‘.imgbox’);
var circleol=document.querySelector(‘.circle’);
//光标移动至轮播图区域按钮显示，移开隐藏，点击按钮的变化效果
windows.addEventListener(‘mouseenter’,function(){
leftbtn.style.display=‘block’;
rightbtn.style.display=‘block’;
clearInterval(timer)//清除定时器自动播放
timer=null;
})
windows.addEventListener(‘mouseleave’,function(){
leftbtn.style.display=‘none’
rightbtn.style.display=‘none’
timer=setInterval(function(){
rightbtn.click();
},2000)
})
leftbtn.addEventListener(‘click’,function(){
leftbtn.style.color=‘grey’
var timer=setTimeout(function(){
leftbtn.style.color=‘aliceblue’
},100)
})
rightbtn.addEventListener(‘click’,function(){
rightbtn.style.color=‘grey’
var timer=setTimeout(function(){
rightbtn.style.color=‘aliceblue’
},100)
})
//点击小圆圈可以滚动
for(var i=0;i<circleul.children.length;i++){
lis=document.createElement(‘li’);
lis.setAttribute(‘index’,i);
circleol.appendChild(lis);
lis.addEventListener(‘click’,function(){
var currentindex=this.getAttribute(‘index’);//bug整改（3行）
num=currentindex;
circlechange=currentindex;
for(var i=0;i<circleol.children.length;i++){
circleol.children[i].className=‘’;
}
this.className=‘circlecolor’;
var imgwidth=windows.offsetWidth-6;
var long=this.getAttribute(‘index’)*imgwidth;
run(circleul,-long);
})
}
circleol.children[0].className=‘circlecolor’;
//克隆第一张图片至末尾
var firstimg=circleul.children[0].cloneNode(true);
circleul.appendChild(firstimg);
//右侧按钮点击滚动
num=0;
circlechange=0;
rightbtn.addEventListener(‘click’,function(){
if(num==circleul.children.length-1){
circleul.style.left=0;
num=0;
}
num++;
long=numwindows.offsetWidth-6num;
run(circleul,-long);
//小圆圈跟着一起变化
circlechange++;
if(circlechange==circleul.children.length-1){
circlechange=0;
}
for(var i=0;i<circleol.children.length;i++){
circleol.children[i].className=‘’;
}
circleol.children[circlechange].className=‘circlecolor’;
})
//左侧按钮滚动
leftbtn.addEventListener(‘click’,function(){
if(num==0){
circleul.style.left=(circleul.children.length-1)*windows.offsetWidth;
num=circleul.children.length-1;
}
num–;
long=numwindows.offsetWidth-6num;
run(circleul,-long);
//小圆圈跟着一起变化
circlechange–;
if(circlechange<0){
circlechange=circleol.children.length-1; //注意此处是ol的子节点的长度-1
}
for(var i=0;i<circleol.children.length;i++){
circleol.children[i].className=‘’;
}
circleol.children[circlechange].className=‘circlecolor’;
})
//自动播放
var timer=setInterval(function(){
rightbtn.click();
},2000)
})
动画函数代码：
=======
function run(obj,long,callback){
clearInterval(obj.timer)
obj.timer=setInterval(function(){
if(obj.offsetLeft==long){
window.clearInterval(obj.timer);
if(callback){
callback();
}
}else{
step=(long-obj.offsetLeft)/10
step=step>0?Math.ceil(step):Math.floor(step)
obj.style.left=obj.offsetLeft+step+‘px’;
}
},20)
}
HTML+CSS 完整代码：
==============
最后
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！
如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
最后
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
[外链图片转存中…(img-AWE7K7AN-1715047493317)]
[外链图片转存中…(img-EBA0K0h4-1715047493318)]
[外链图片转存中…(img-2Cs38Day-1715047493318)]
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！
如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！