无缝轮播实战心得

1、图片：图片在第一张图前面放置最后一张图，在最后一张图后面放上第一张图

<img src="images/3.jpg"  class=" img-responsive "><img src="images/1.jpg" class=" img-responsive">  <img src="images/2.jpg" class=" img-responsive "> <img src="images/3.jpg"  class=" img-responsive "> <img src="images/1.jpg" class=" img-responsive ">

2、宽度：包裹的图片的父元素，宽度=（所有图片宽度）*（所有图片个数）
（注：在这里我给自己挖了两个大坑，第一，在调试向后箭头和向前箭头时，无法做到无缝连接（原因我将来宽度设置=（图片宽度*3））；第二，动画时，点击向后箭头到最后一张图却换至第一张时，出现空白区域（原因：总宽度=图片宽度*4））

#roll{    position: absolute;z-index: 1;width: 500%;left: -100%;}#roll img{float: left;}

3、圆点按钮：计算移动距离值；结束后赋值圆点index

//点击时按钮index值    let sum = $(item).attr('index');//移动距离     let offset= -(width*(sum -index)) ;//调用位移函数     animate(offset);//将点击后按钮index的值，赋值     index  = sum;

4、动画：每次位移量（speed）=位移长度/（设置总位移时间/每一次唯一的间隔），添加动画函数狗go(), setTimeout调用自身，定时器判断条件（向左：speed>0 && （现在的位置 <目标位置）；向右：speed <0 && （现在位置 > 目标位置）

//移动偏移量function animate(offset){    let newleft = parseInt($('#roll').css('left')) + offset ;    let time =300;//总的位移时间    let interval =10;//位移间隔时间    let  speed = offset/(time/interval);//每次位移量    animated = true;    //动画函数    function go(){        let  nowLeft = parseInt($('#roll').css('left'));//现在的位置        if((speed > 0 && nowLeft < newleft)|| (speed < 0 && nowLeft > newleft)){//判断是否达到目标值            $('#roll').css({'left':nowLeft+speed +'px'});            setTimeout(go,interval);        }else{            $('#roll').css({'left':newleft+'px'}) ;            if(newleft > - (width)){                 $('#roll').css({'left':-(3*width)+'px'}) ;             }            if(newleft < (-3*width)){                 $('#roll').css({'left':-width +'px'}) ;             }        }        animated =false;    }    go();}

5、防止多次点击出现多次动画效果后的bug：设置正在点击的标志位，go（）函数执行完成之后设置为false；在设置点击事件时，判断标志位是否为真，if(true)return;

$('#next').click(() =>{     if (animated)return;    if(index == 3){index =1;    }else{index +=1;}    animate(-width);    showbotton(index);});