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);
});