轮播图知识点

动画部分包括：

1.鼠标经过第几个小圆点，就要展示第几张图片，并且小圆点的颜色也发生变化

2.图片自动轮播，（这需要一个定时器）

3.鼠标经过图片，图片停止自动播放（这需要清除定时器）

4.鼠标离开图片，图片继续自动轮播 （重新开始定时器）

这里我们封装了一个animate()动画函数

```

// 动画函数 第一个参数，代表谁动  第二个参数 动多少

        // 让图片做匀速运动，匀速动画的原理是 当前的位置 + 速度  即 offsetLeft + speed

        function animate(obj,target){

            // 首先清除掉定时器

            clearInterval(obj.timer);

            // 用来判断 是+ 还是 -  即说明向左走还是向右走

            var speed = obj.offsetLeft < target ? 15 : -15;

            obj.timer = setInterval(function(){

                var result = target - obj.offsetLeft;//它们的差值不会超过speed

                obj.style.left = obj.offsetLeft + speed + "px";

                // 有可能有小数的存在，所以在这里要做个判断             

                if (Math.abs(result) <= Math.abs(speed)) {

                    clearInterval(obj.timer);

                    obj.style.left = target + "px";

                }

            },10);

        }

```

定时器 函数

```

var timer = null; // 轮播图的定时器

        var key = 0;// 控制播放的张数

        var circle = 0;// 控制小圆点

        timer = setInterval(autoplay,1000);// 自动轮播

        function autoplay(){

            /*自动轮播时,要对播放的张数key进行一个判断,如果播放的张数超过ulLis.length-1,

            就要重头开始播放.  因为我们克隆了第一张并将其放在最后面,所以我们要从第二张图片开始播放*/

            key++; // 先++