17.1.24 轮播思路

JS轮播图

1.在Html中用div做container,来存放图片组

#container>#img-lists>img*图片数字

设置基本的css样式

2.js中分几步

2.1 创建按钮

先创建新的ul或者div来存放按钮，按钮用遍历的方式分别添加到创建ul中

使用addClass函数，添加对应的样式名字

2.2 编写点击函数

使得按钮能分别控制图片组中的图片切换  编写clickSpan函数

依据图片在图片组中的index来进行iTarget值得切换，达到切换的目的

使用事件代理delegateEvent函数

因为图片切换的时候按钮的样式也有切换，所以编写一个移出属性名的函数，removeClass

2.3编写自动运行

分别是移入移出事件，和运动模型startMove，以及编写自动运行autoPlay函数

autoPlay可以参考上面按钮点击的clickSpan函数，只不过是从点击事件改成了计时器来控制

startMove参考http://www.rehack.cn/techshare/webfe/javascript/2829.html或者慕课的JS运动课程

使用setInterval方法，注意在使用的时候配合clearInterval方法，不然操作不当计时器会叠加