【学会轮播图这一篇文章就足够啦】JS 网页轮播图详解 自动播放+手动播放

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’;

})

---

六：自动播放实现

====