网页轮播图案例（重点）

1. 功能需求：

1. 鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。
2. 点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理。
3. 图片播放的同时，下面小圆圈模块跟随一起变化。
4. 点击小圆圈，可以播放相应图片。
5. 鼠标不经过轮播图，轮播图也会自动播放图片。
6. 鼠标经过，轮播图模块，自动播放停止。

2. 总体分析

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

3. 动态生成小圆圈

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

4.  小圆圈的排他思想

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

5.  点击小圆圈滚动图片

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

6.  右侧按钮功能

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

1. 声明一个变量 num，点击一次，自增 1，让这个变量乘以图片宽度，就是ul 的滚动距离。
2. 图片无缝滚动原理
3. 把 ul 第一个 li 复制一份，放到 ul 的最后面
4. 当图片滚动到克隆的最后一张图片时，让 ul 快速的、不做动画的跳到最左侧：left 为0
5. 同时 num 赋值为0，可以从新开始滚动图片了

7.  克隆第一张图片

1. 克隆 ul 第一个 li.cloneNode() 加 true 深克隆复制里面的子节点（false：浅克隆）
2. 添加到 ul 最后面 appendChild

8.  点击右侧按钮，小圆圈跟随变化

1. 最简单的做法是再声明一个变量 circle，每次点击自增1，注意，左侧按钮也需要这个变量&#