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’;
})
六:自动播放实现
========
自动播放最简单!,只需要一个自动点击即可