html5图片无限循环播放,原生js实现无限循环轮播图效果

知识要点

1.实现无限循环的原理：

以偏移的距离来判断是否跳回第一张和最后一张

也可以利用循环判断图片的当前索引值

var newLeft=parseInt(list.style.left)+offset;//当前的偏移量+下一次的偏移量=新的偏移量

list.style.left=newLeft+"px";//当前的偏移值=新的偏移值

//以偏移的距离来判断是否跳回第一张和最后一张

if(newLeft>-600){

list.style.left=-3000+"px";

}

if (newLeft

list.style.left=-600+"px";

}

2.当前图片轮播的圆点变色显示：

因为每次点击index+1 所以当前的index-1就是button的索引

//添加on前先清空on

for(var i=0;i

if(buttons[i].className=="on"){

buttons[i].className="";

break;

}

}

buttons[index-1].className="on";

3.实现动画滚动效果：

原理就是把每次的偏移量分为多次完成比如一次600px那就分为10次每次偏移60px

就要用到setTimeout(go,10);//10毫秒再次调用go函数，一直到不满足条件就停

var newLeft=parseInt(list.style.left)+offset;//当前的偏移量+下一次的偏移量=新的偏移量

var time=300;//位移总时间

var interval=10;//位移间隔时间

//动画效果自定义公式： 每次位移的距离=单次偏移距离/位移次数

var speed=offset/(time/interval);

//递归函数 直到不满足条件(跳到辅助图)

//递归就是把600偏移量分为多次完成偏移

function go(){

//speed<0 并且 当前偏移量>下一次偏移量 就是向左偏移 || 反之向右偏移

if ((speed<0 &&parseInt(list.style.left)>newLeft) || (speed>0 &&parseInt(list.style.left)

list.style.left=parseInt(list.style.left)+speed+"px";//每次位移的值

setTimeout(go,interval);//10毫秒再次调用go函数

}else{

animated=false;

list.style.left=newLeft+"px";//当前的偏移值=新的偏移值

if(newLeft>-600){

list.style.left=-3000+"px";