1、要做事先找人
把所有能用到的标签全部获取到
2、动态生成结构：按钮li
2.1 根据ul 中的li 动态生成ol中的li，ul中有几个li 生成ol中几个li
2.2设置li中的文本，把li追加到ol中
2.3获取ol中的li
2.4根据第一张图，动态克隆，并追加到ul最后
3、鼠标经过按钮，移动ul到指定的位置
3.1鼠标经过按钮，按钮排他（干掉所有人，留下我自己）
3.2经过按钮，ul移动到指定位置
指定位置：-this.index * imgWidth和当前按钮的索引以及图片的宽度有关，向左移动是负数
①设置索引②取图片的宽度③调用动画函数
4、鼠标点击箭头
4.1 显示出箭头
4.2 点击右箭头，把ul移动到指定位置
①鼠标点击事件
②ul移动到指定位置：-pic * imgWidth 和图片索引和图片宽度有关
③判断图片移动到最后一张后（假的第一张），瞬间调到开头，然后做从第一张到第二张的动画
ul.style.left = 0; //瞬间移动到开头
pic = 0;//索引后归零，后续让ul从第一张渐渐移动到第二张
4.3点击左箭头
当图片移动到第一张后，瞬间跳到最后，然后做从最后一张到倒数第二张的动画
5、按钮也要跟着左右箭头移动
根据当前图片的索引，计算出下一个应该亮起的按钮的索引
干掉所有人、、留下相应的
6、添加自动滚动
每隔一秒播放下一张（让点击右箭头的事件每隔一秒执行一次）
鼠标放在图片上自动滚动停止，离开后继续自动滚动
鼠标经过图片清除自动滚动，离开时继续自动滚动
在图片自动滚动时，经过按钮放开后，图片会接着自动滚动时的顺序继续滚动，而不是从经过按钮的图片开始滚动：把记录显示按钮的索引变为当前按钮的索引
把记录显示图片的索引变为当前图片的索引