网页轮播图（功能最全）

布局：

slider > ul > li

slider > arrow > a> img

arrow : z-index:2 ;

注意，ul 里面放着所有轮播图的图片，所以 ul 的宽度必须足够大能够容纳所有图片，这里有4张图片，ul宽度设置为 600%

功能需求：

1，鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮

slider.addEventListener（“mouseover",function(){
  arrowLeft.style.display="block";
  arrowRight.style.display="block";
})
slider.addEventListener("mouseout",function(){
  arrowLeft.style.display="none";
  arrowRight.style.display="none";
})

2，动态生成小圆圈

     ①：核心思路：小圆圈的个数要跟图片张数一致

     ②：所以首先先得到 ul 里面图片的张数（图片放入 li 中，所以就是 li 的个数）

     ③：利用循环动态生成小圆圈（这个小圆圈要放入 ol 里面）

     ④：创建节点 createElement("li")

     ⑤：插入节点：ol.appendChild (li)

     ⑥：第一个小圆圈需要添加 current 类

var ul=document.querySelector("ul");
var ol=document.querySelector(".circle");
var imgs=ul.children;
for(var i=0; i<imgs.length; i++)
{
   document.createElement("li");
   ol.appendChild(li);
}
ol.children[0].className="current";

3, 小圆圈的排他思想

   ①点击哪个小圆圈，哪个小圆圈就添加 " current " 类

   ②其余的小圆圈就移除这个 current 类

   ③注意：我们在刚才生成小圆圈的同时，就可以直接绑定这个点击事件了。

for(var i=0;i<imgs.length;i++)
{
   var li=document.createElement("li");
   ol.appendChild(li);
   li..addEventListener("click" , function(){
      for(var j=0; j<ol.children.length; j++)
      {
         ol.children[j].className=" ";
      }
      this.className="current" ;
  })
}
ol.children[0].className="current";

4，点击小圆圈滚动图片

   ①此时用到 animate动画函数，将 js 文件引入 （注意，因为 index.js 依赖 animate.js，所以，            animate.js 要写到 index.js 上面）

   ②使用动画函数的前提，该元素必须有定位（ul)

   ③注意是 ul 移动，不是 小 li

   ④滚动图片的核心算法：点击某个小圆圈，就让图片滚动，小圆圈的索引号乘以图片的宽度 作为         ul 的移动距离

   ⑤此时需要知道小圆圈的索引号，我们可以下生成小圆圈的时候，给它设置一个自定义属性，点        击的时候获取这个自定义属性即可。

for(var i=0 ; i<imgs.length ; i++)
{
   document.createElement("li");
   ol.appendChild(li);
   li.setAttribute("index" , i);
   li.addEventListener("click", function(){
      for(var j=0; j<ol.children.length; j++)
       {
          ol.children[j].className="";
       } 
      this.className="current";
      var index=this.getAttribute("index");
      var sliderWidth=slider.offsetWidth;
      animate(ul , -index*sliderWidth）;
   })
}
ol.children[0].className="current";

5，右侧按钮无缝滚动

      ①点击右侧按钮一次，就让图片滚动一张

      ②声明一个变量num ， 点击一次，自增 1，让这个变量乘以图片宽度，就是 ul 的滚动距离

      ③图片无缝滚动原理：

          把 ul 第一个 li 复制一份，放到 ul 的最后面，

          当图片滚动到克隆的最后一张图片时，让ul快速的，不做动画的跳到最左侧：left 为0，

          同时num赋值为0，可以从新开始滚动图片了。

       ④ 克隆第一张图片

            克隆 ul 第一个 li , cloneNode( ) ， 加 true 深克隆， 复制里面的子节点，false 浅克隆

            添加到 ul 最后面 appendChild()

var imgLast=ul.children[0].cloneNode(true);
ul.appendChild(imgLast);
var num=0;
arrowRight.addEventListener("click" , function(){
  if(num==ul.children.length-1)
  {
     ul.style.left=0;
     num=0;
  }
  num++;
  animate(ul, -num*sliderWidth);
})
//这里必须是先判断，再加加，再执行

6，小圆圈跟随右侧按钮一起变化

      ①最简单的 做法是再声明一个变量 circle , 每次点击自增 1，注意，左侧按钮也需要这个变量，            因此要声明全局变量

      ②但是图片有5张，小圆圈只有4个少一个，必须加一个判断条件，

      ③如果 circle==4 ，就重新复原为 0 

var num=0;
var circle=0;
arrowRight.addEventListener("click", function(){
  if(num==ul.children.length)
  {
      ul.style.left=0;
      num=0;
  }
  num++;
  animate(ul, -num*sliderWidth);

 circle++;  //这里必须是先加加，再判断，再执行
 if(circle==ol.children.length)
  {
     circle=0;
  }
  for(var i=0;i<ol.children.length;i++)
  {
    ol.children[i].className="";
  }
  ol.children[circle].className="current";
})

    7，到这一步，还有两个bug 需要解决

          ①当点击小圆圈让图片播放到第三张，下面的小圆圈停留在第三个（索引号等于2）的时候，点击右侧按钮，发现下一张图片并不是第4张图片，而是第二张图片

          ②原因就是点击右侧按钮的时候，num值与点击小圆圈时候的 circle 没有关系

          ③解决方法：点击小圆圈的时候，获取小圆圈当前的索引号，然后把小圆圈当前的索引号 circle 赋给 num ，这样再点击右侧按钮的时候，就可以在 circle 的基础上自增了。

          ④第二个bug ：上面的bug解决之后，点击小圆圈让图片播放到第三张，再点击右侧按钮，图片可以顺利播放到第四张，但是下面的小圆圈却显示在第二个

          ⑤原因还是因为点击右侧按钮的时候，右侧按钮点击次数的索引号 num 与 之后点击小圆圈的 circle 没有建立联系

          ⑥解决方案就是，在点击右侧按钮的时候，获取右侧按钮点击次数当前的索引号，然后把当前的索引号赋给 circle，这样再点击小圆圈的时候，就可以在 num 的基础上 自增了。

li.addEventListener("click ,function(){
  for(var j=0; j<ol.children.length;j++)
  {
     ol.children[j].className="";
  }
  this.className="current";

  var index=this.getAttribute("index");
  num=index;
  circle=index;
  animate(ul, -index*sliderWIdth);
})

8，左侧按钮功能制作，方法：直接将右侧按钮点击事件复制过来，修改里面的参数即可，注意一些参数的修改

arrowLeft.addEventListener(click, function(){
  if(num==0)
  {
       ul.style.left= -(ul.children.length-1)*sliderWidth +"px";
       num=ul.children.length-1;
  }
  num--;
  animate(ul , -num*sliderWidth);

 circle--;
 if(circle<0)
  {
     circle=ol.children.length-1;
  }
for(var i=0;i<ol.children.length ; i++)
 {
     ol.childdren[i].className=" " ;
 }
ol.children[circle].className="current";
})

9，代码优化

window.addEventListener("load",function(){
   // alert(11);
    var slider=document.querySelector(".slider");
    var arrowLeft=document.querySelector(".arrow-left");
    var arrowRight=document.querySelector(".arrow-right");
    var sliderWidth=slider.offsetWidth;

    //1,鼠标经过，左右按钮显示，鼠标离开，左右按钮隐藏
    slider.addEventListener("mouseover",function(){
        arrowLeft.style.display= "block";
        arrowRight.style.display= "block";
    })
    slider.addEventListener("mouseout",function(){
        arrowLeft.style.display= "none";
        arrowRight.style.display= "none";
    })

    //2，动态生成小圆圈
    var ul=document.querySelector("ul");
    var imgs=ul.children;
    var ol=document.querySelector(".circle");
    for(var i=0;i<imgs.length;i++)
    {
        var li=document.createElement("li");
        li.setAttribute("index",i); //记录当前小圆圈的索引号，通过自定义属性来做
        ol.appendChild(li);
        //3，小圆圈的排他思想，我们可以直接在生成小圆圈的同时直接绑定点击事件
        li.addEventListener("click",function () {
            for(var j=0;j<ol.children.length;j++){
                ol.children[j].className="";
            }
            this.className = "current";
            //4，点击小圆圈，移动图片，当然移动的是 ul ，ul 的移动距离=小圆圈的索引号乘以图片的宽度，注意是负值
            var index=this.getAttribute("index");//当我们点击了某个小 li ,就拿到当前小 li 的索引号
            //var sliderWidth=slider.offsetWidth; 下面右侧按钮点击事件也用到这个值，所以把它放到最上面
            num=index; //当我们点击了某个小圆圈，就要把这个小圆圈的索引号给 num
            circle=index; //当我们点击了某个小圆圈，就要把这个小圆圈的索引号给circle
            animate(ul,-index*sliderWidth);
        })
    }
    ol.children[0].className="current";

    //5,点击右侧按钮，图片滚动一张
    var imgLast=ul.children[0].cloneNode(true);  //克隆第一张图片
    ul.appendChild(imgLast);
    var num=0;
    var circle=0;
    arrowRight.addEventListener("click",function () {
        if (num==ul.children.length-1)
        {
            ul.style.left=0;
            num=0;
        }
        num++;
        animate(ul,-num*sliderWidth);

        //6,点击右侧按钮，小圆圈跟随一起变化，可以再声明一个变量控制小圆圈的播放
        circle++;
        if (circle==ol.children.length)
        {
            circle=0;
        }
        // for(var i=0;i<ol.children.length;i++)
        // {
        //     ol.children[i].className="";
        // }
        // ol.children[circle].className="current";

        这里可以封装成一个circleChange函数
        circleChange();      })

//7,点击左侧按钮，图片滚动一张
    arrowLeft.addEventListener("click",function () {
        if (num==0)
        {
            // ul.style.left = -(ul.children.length - 1)*sliderWidth + "px";
            // num = ul.children.length - 1;
            这里可以优化一下
            num=ul.children.length -1
            ul.style.left= -num*sliderWidth +"px";
        } 
       num--; 
       animate(ul,-num*sliderWidth); //8,点击左侧按钮，小圆圈跟随一起变化，可以再声明一个变量控制小圆圈的播放 
 
       circle--; 
       if (circle<0) {
         circle=ol.children.length-1; 
       } 
         // for(var i=0;i<ol.children.length;i++) 
        //  {
       //    ol.children[i].className=""; 
      //    } 
     //     ol.children[circle].className="current"; 
       circleChange() }) 
       function circleChange() { 
        for(var i=0;i<ol.children.length;i++) { 
          ol.children[i].className=""; 
         } 
        ol.children[circle].className="current";
        } 
})

10，自动播放功能

        ①添加一个定时器

        ②自动播放轮播图，实际就类似于点击了右侧按钮

        ③此时我们使用手动调用右侧按钮点击事件 arrowRight.click();

        ④鼠标经过slider就停止定时器

        ⑤鼠标离开slider就开启定时器

        

window.addEventListener("load",function(){
    // alert(11);
    var slider=document.querySelector(".slider");
    var arrowLeft=document.querySelector(".arrow-left");
    var arrowRight=document.querySelector(".arrow-right");
    var sliderWidth=slider.offsetWidth;

    //1,鼠标经过，左右按钮显示，鼠标离开，左右按钮隐藏
    slider.addEventListener("mouseover",function(){
        arrowLeft.style.display= "block";
        arrowRight.style.display= "block";
        clearInterval(timer);
    })
    slider.addEventListener("mouseout",function(){
        arrowLeft.style.display= "none";
        arrowRight.style.display= "none";
        timer=setInterval(function () {
            arrowRight.click();
        },1000);
    })

    //2，动态生成小圆圈
    var ul=document.querySelector("ul");
    var imgs=ul.children;
    var ol=document.querySelector(".circle");
    for(var i=0;i<imgs.length;i++)
    {
        var li=document.createElement("li");
        li.setAttribute("index",i); //记录当前小圆圈的索引号，通过自定义属性来做
        ol.appendChild(li);
        //3，小圆圈的排他思想，我们可以直接在生成小圆圈的同时直接绑定点击事件
        li.addEventListener("click",function () {
            for(var j=0;j<ol.children.length;j++){
                ol.children[j].className="";
            }
            this.className = "current";
            //4，点击小圆圈，移动图片，当然移动的是 ul ，ul 的移动距离=小圆圈的索引号乘以图片的宽度，注意是负值
            var index=this.getAttribute("index");//当我们点击了某个小 li ,就拿到当前小 li 的索引号
            //var sliderWidth=slider.offsetWidth; 下面右侧按钮点击事件也用到这个值，所以把它放到最上面
            num=index; //当我们点击了某个小圆圈，就要把这个小圆圈的索引号给 num
            circle=index; //当我们点击了某个小圆圈，就要把这个小圆圈的索引号给circle
            animate(ul,-index*sliderWidth);
        })
    }
    ol.children[0].className="current";

    //5,点击右侧按钮，图片滚动一张
    var imgLast=ul.children[0].cloneNode(true);  //克隆第一张图片
    ul.appendChild(imgLast);
    var num=0;
    var circle=0;
    arrowRight.addEventListener("click",function () {
        if (num==ul.children.length-1)
        {
            ul.style.left=0;
            num=0;
        }
        num++;
        animate(ul,-num*sliderWidth);

        //6,点击右侧按钮，小圆圈跟随一起变化，可以再声明一个变量控制小圆圈的播放
        circle++;
        if (circle==ol.children.length)
        {
            circle=0;
        }
        // for(var i=0;i<ol.children.length;i++)
        // {
        //     ol.children[i].className="";
        // }
        // ol.children[circle].className="current";
        circleChange();
    })

    //7,点击左侧按钮，图片滚动一张
    arrowLeft.addEventListener("click",function () {
        if (num==0)
        {
            // ul.style.left = -(ul.children.length - 1)*sliderWidth + "px";
            // num = ul.children.length - 1;
            num=ul.children.length-1;
            ul.style.left= -num*sliderWidth +"px";
        }
        num--;
        animate(ul,-num*sliderWidth);

        //8,点击左侧按钮，小圆圈跟随一起变化，可以再声明一个变量控制小圆圈的播放
        circle--;
        if (circle<0)
        {
            circle=ol.children.length-1;
        }
        // for(var i=0;i<ol.children.length;i++)
        // {
        //     ol.children[i].className="";
        // }
        // ol.children[circle].className="current";
        circleChange()
    })

    function circleChange() {
        for(var i=0;i<ol.children.length;i++)
        {
            ol.children[i].className="";
        }
        ol.children[circle].className="current";
    }

    //9,自动播放轮播图
    var timer=setInterval(function () {
        arrowRight.click();
    },1000);
})

11, 节流阀

     ①防止轮播图按钮连续点击造成播放过快

     ②节流阀的目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连             续触发

     ③核心实现思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数

     ④开始设置一个 var flage=trur;

     ⑤ if ( flag) { flag=false ;  do something }  关闭水龙头

     ⑥利用回调函数，动画执行完毕， flag = true  打开水龙头

window.addEventListener("load",function(){
    // alert(11);
    var slider=document.querySelector(".slider");
    var arrowLeft=document.querySelector(".arrow-left");
    var arrowRight=document.querySelector(".arrow-right");
    var sliderWidth=slider.offsetWidth;

    //1,鼠标经过，左右按钮显示，鼠标离开，左右按钮隐藏
    slider.addEventListener("mouseover",function(){
        arrowLeft.style.display= "block";
        arrowRight.style.display= "block";
        clearInterval(timer);
    })
    slider.addEventListener("mouseout",function(){
        arrowLeft.style.display= "none";
        arrowRight.style.display= "none";
        timer=setInterval(function () {
            arrowRight.click();
        },1000);
    })

    //2，动态生成小圆圈
    var ul=document.querySelector("ul");
    var imgs=ul.children;
    var ol=document.querySelector(".circle");
    for(var i=0;i<imgs.length;i++)
    {
        var li=document.createElement("li");
        li.setAttribute("index",i); //记录当前小圆圈的索引号，通过自定义属性来做
        ol.appendChild(li);
        //3，小圆圈的排他思想，我们可以直接在生成小圆圈的同时直接绑定点击事件
        li.addEventListener("click",function () {
            for(var j=0;j<ol.children.length;j++){
                ol.children[j].className="";
            }
            this.className = "current";
            //4，点击小圆圈，移动图片，当然移动的是 ul ，ul 的移动距离=小圆圈的索引号乘以图片的宽度，注意是负值
            var index=this.getAttribute("index");//当我们点击了某个小 li ,就拿到当前小 li 的索引号
            //var sliderWidth=slider.offsetWidth; 下面右侧按钮点击事件也用到这个值，所以把它放到最上面
            num=index; //当我们点击了某个小圆圈，就要把这个小圆圈的索引号给 num
            circle=index; //当我们点击了某个小圆圈，就要把这个小圆圈的索引号给circle
            animate(ul,-index*sliderWidth);
        })
    }
    ol.children[0].className="current";

    //5,点击右侧按钮，图片滚动一张
    var imgLast=ul.children[0].cloneNode(true);  //克隆第一张图片
    ul.appendChild(imgLast);
    var num=0;
    var circle=0;
    var flag=true; //flag节流阀
    arrowRight.addEventListener("click",function () {
        if (flag)
        {
            flag=false; //关闭节流阀
            if (num==ul.children.length-1)
            {
                ul.style.left=0;
                num=0;
            }
            num++;
            animate(ul,-num*sliderWidth,function () {
                flag=true;
            });

            //6,点击右侧按钮，小圆圈跟随一起变化，可以再声明一个变量控制小圆圈的播放
            circle++;
            if (circle==ol.children.length)
            {
                circle=0;
            }
            // for(var i=0;i<ol.children.length;i++)
            // {
            //     ol.children[i].className="";
            // }
            // ol.children[circle].className="current";
            circleChange();
        }

    })

    //7,点击左侧按钮，图片滚动一张
    arrowLeft.addEventListener("click",function () {
        if (flag)
        {
            flag=false;
            if (num==0)
            {
                // ul.style.left = -(ul.children.length - 1)*sliderWidth + "px";
                // num = ul.children.length - 1;
                num=ul.children.length-1;
                ul.style.left= -num*sliderWidth +"px";
            }
            num--;
            animate(ul,-num*sliderWidth,function () {
                flag=true;
            });

            //8,点击左侧按钮，小圆圈跟随一起变化，可以再声明一个变量控制小圆圈的播放
            circle--;
            if (circle<0)
            {
                circle=ol.children.length-1;
            }
            // for(var i=0;i<ol.children.length;i++)
            // {
            //     ol.children[i].className="";
            // }
            // ol.children[circle].className="current";
            circleChange()
        }

    })

    function circleChange() {
        for(var i=0;i<ol.children.length;i++)
        {
            ol.children[i].className="";
        }
        ol.children[circle].className="current";
    }

    //9,自动播放轮播图
    var timer=setInterval(function () {
        arrowRight.click();
    },1000);
})

12,完整代码：

  ①index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="index.css">
    <script type="text/javascript" src="animate.js"></script>
    <script type="text/javascript" src="index.js"></script>
</head>
<body>
   <div class="slider">
       <a href="javascript:;" class="arrow-left">&lt;</a>  <!--左侧按钮-->
       <a href="javascript:;" class="arrow-right">&gt;</a> <!--右侧按钮-->
        <ul>
            <li><a href=""><img src="images/01.jpg" alt=""></a></li>
            <li><a href=""><img src="images/02.jpg" alt=""></a></li>
            <li><a href=""><img src="images/03.jpg" alt=""></a></li>
            <li><a href=""><img src="images/04.jpg" alt=""></a></li>
        </ul>
        <ol class="circle"></ol>
   </div>
</body>
</html>

  ②index.css

  

*{
    padding:0;
    margin:0;
}
a{
    text-decoration:none;
}
ul,
ol{
    list-style:none;
}
.slider{
    721px;
    height:455px;
    background-color:purple;
    margin: 100px auto;
    position:relative;
    overflow: hidden;
}
.slider > ul{
    position:absolute;
    top:0;
    left:0;
    600%;
}
.slider > ul >li{
    float:left;
}
.arrow-left,
.arrow-right{
    24px;
    height:40px;
    background-color: rgba(0,0,0,0.3);
    position:absolute;
    top:50%;
    margin-top:-20px;
    z-index:2;
    text-align:center;
    line-height:40px;
    color:#fff;
    font-size:20px;
    display:none;
}
.arrow-left{
    left:0;
}
.arrow-right{
    right:0;
}
ol.circle{
    position:absolute;
    bottom:10px;
    left:50px;
}
.circle > li{
    float:left;
    8px;
    height:8px;
    border:2px solid rgba(255,255,255,0.5);
    margin:0 3px;
    border-radius:50%;
    cursor:pointer;
}
.current{
    background-color: #fff;
}

  ③index.js

   

window.addEventListener("load",function(){
    // alert(11);
    var slider=document.querySelector(".slider");
    var arrowLeft=document.querySelector(".arrow-left");
    var arrowRight=document.querySelector(".arrow-right");
    var sliderWidth=slider.offsetWidth;

    //1,鼠标经过，左右按钮显示，鼠标离开，左右按钮隐藏
    slider.addEventListener("mouseover",function(){
        arrowLeft.style.display= "block";
        arrowRight.style.display= "block";
        clearInterval(timer);
    })
    slider.addEventListener("mouseout",function(){
        arrowLeft.style.display= "none";
        arrowRight.style.display= "none";
        timer=setInterval(function () {
            arrowRight.click();
        },1000);
    })

    //2，动态生成小圆圈
    var ul=document.querySelector("ul");
    var imgs=ul.children;
    var ol=document.querySelector(".circle");
    for(var i=0;i<imgs.length;i++)
    {
        var li=document.createElement("li");
        li.setAttribute("index",i); //记录当前小圆圈的索引号，通过自定义属性来做
        ol.appendChild(li);
        //3，小圆圈的排他思想，我们可以直接在生成小圆圈的同时直接绑定点击事件
        li.addEventListener("click",function () {
            for(var j=0;j<ol.children.length;j++){
                ol.children[j].className="";
            }
            this.className = "current";
            //4，点击小圆圈，移动图片，当然移动的是 ul ，ul 的移动距离=小圆圈的索引号乘以图片的宽度，注意是负值
            var index=this.getAttribute("index");//当我们点击了某个小 li ,就拿到当前小 li 的索引号
            //var sliderWidth=slider.offsetWidth; 下面右侧按钮点击事件也用到这个值，所以把它放到最上面
            num=index; //当我们点击了某个小圆圈，就要把这个小圆圈的索引号给 num
            circle=index; //当我们点击了某个小圆圈，就要把这个小圆圈的索引号给circle
            animate(ul,-index*sliderWidth);
        })
    }
    ol.children[0].className="current";

    //5,点击右侧按钮，图片滚动一张
    var imgLast=ul.children[0].cloneNode(true);  //克隆第一张图片
    ul.appendChild(imgLast);
    var num=0;
    var circle=0;
    var flag=true; //flag节流阀
    arrowRight.addEventListener("click",function () {
        if (flag)
        {
            flag=false; //关闭节流阀
            if (num==ul.children.length-1)
            {
                ul.style.left=0;
                num=0;
            }
            num++;
            animate(ul,-num*sliderWidth,function () {
                flag=true;
            });

            //6,点击右侧按钮，小圆圈跟随一起变化，可以再声明一个变量控制小圆圈的播放
            circle++;
            if (circle==ol.children.length)
            {
                circle=0;
            }
            circleChange();
        }

    })

    //7,点击左侧按钮，图片滚动一张
    arrowLeft.addEventListener("click",function () {
        if (flag)
        {
            flag=false;
            if (num==0)
            {
                num=ul.children.length-1;
                ul.style.left= -num*sliderWidth +"px";
            }
            num--;
            animate(ul,-num*sliderWidth,function () {
                flag=true;
            });

            //8,点击左侧按钮，小圆圈跟随一起变化，可以再声明一个变量控制小圆圈的播放
            circle--;
            if (circle<0)
            {
                circle=ol.children.length-1;
            }
            circleChange()
        }

    })

    function circleChange() {
        for(var i=0;i<ol.children.length;i++)
        {
            ol.children[i].className="";
        }
        ol.children[circle].className="current";
    }

    //9,自动播放轮播图
    var timer=setInterval(function () {
        arrowRight.click();
    },1000);
})

  ④animate.js

function animate(obj, target, callback) {
    // console.log(callback);  callback = function() {}  调用的时候 callback()

    // 先清除以前的定时器，只保留当前的一个定时器执行
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        // 步长值写到定时器的里面
        // 把我们步长值改为整数 不要出现小数的问题
        // var step = Math.ceil((target - obj.offsetLeft) / 10);
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            // 停止动画 本质是停止定时器
            clearInterval(obj.timer);
            // 回调函数写到定时器结束里面
            // if (callback) {
            //     // 调用函数
            //     callback();
            // }
            callback && callback();
        }
        // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
        obj.style.left = obj.offsetLeft + step + 'px';

    }, 15);
}