思路梳理

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

• 因为js较多，我们单独新建js文件夹，再新建js文件， 引入页面中。
• 此时需要添加 load 事件。
• 鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。
• 显示隐藏 display 按钮。

2. 动态生成小圆圈 有几张图片，我就生成几个小圆圈

• 核心思路：小圆圈的个数要跟图片张数一致 所以首先先得到ul里面图片的张数（图片放入li里面，所以就是li的个数） 利用循环动态生成小圆圈（这个小圆圈要放入ol里面）
• 创建节点 createElement(‘li’)
• 插入节点 ol. appendChild(li)
• 第一个小圆圈需要添加 current 类

3. 小圆圈的排他思想 我们可以直接在生成小圆圈的同时直接绑定点击事件

• 小圆圈的排他思想
• 点击当前小圆圈，就添加current类
• 其余的小圆圈就移除这个current类
• 注意： 我们在刚才生成小圆圈的同时，就可以直接绑定这个点击事件了。

4.点击小圆圈滚动图片

• 此时用到animate动画函数，将js文件引入（注意，因为index.js 依赖 animate.js 所以，animate.js 要写到 index.js 上面）
• 使用动画函数的前提，该元素必须有定位
• 注意是ul 移动 而不是小li
• 滚动图片的核心算法： 点击某个小圆圈 ， 就让图片滚动 小圆圈的索引号乘以图片的宽度做为ul移动距离 此时需要知道小圆圈的索引号， 我们可以在生成小圆圈的时候，给它设置一个自定义属性，点击的时候获取这个自定义属性即可。

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

• 点击右侧按钮一次，就让图片滚动一张。
• 声明一个变量num， 点击一次，自增1， 让这个变量乘以图片宽度，就是 ul 的滚动距离。

6.图片无缝滚动原理：

• 把ul 第一个li 复制一份，放到ul 的最后面
• 克隆第一张图片
• 克隆ul 第一个li cloneNode() 加true 深克隆 复制里面的子节点 ； false 浅克隆
• 添加到 ul 最后面 appendChild
• 当图片滚动到克隆的最后一张图片时， 让ul 快速的、不做动画的跳到最左侧： left 为0 同时num 赋值为0，可以从新开始滚动图片了