轮播图

    分析:

    复制元素(可以不用js来实现)

        => 原因:就是当最后一张走完的时候会出现留白的现象

        => 为了增加体验效果 , 我们会把第一张复制一份放到最后面

        => 把最后一张复制一份放到最前面

    设置焦点

        => 我们的焦点需要比我们的图片少2个

    自动轮播

        => 就是需要让图片动起来

        => 需要使用到定时器

        => 需要使用反复性定时器

        => 第一次运动 : -1 * bannerBox.clientWidth

        => 第二次运动 : -2 * bannerBox.clientWidth

        => 第三次运动 : -3 * bannerBox.clientWidth

    运动结束

        => 我们也写成函数的形式

        => 这个函数不是上来就调用的

        => 当到了最后一张的时候我们要让图片回到对应位置

        => 焦点也需要跟着移动

        => 图片的索引:  0  1  2  3  4  5  6

        => 焦点的索引:     0  1  2  3  4

    移入移出

        => 移入: 就是停止自动轮 , 需要关闭定时器

        => 移出: 自动轮播开始工作 , 再次调用我们的自动轮播的函数

    点击切换

        => 就是在点击 左右按钮的时候能切换图片

        => 我们在点击焦点的时候也能到达指定的图片

        => 实现方式

            -> 第一种: 单独获取 , 单独设置

            -> 第二种: 事件委托的方式

    
1
2
3
4
5
<
>

其中调用的运动函数在上一节