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方法,不然操作不当计时器会叠加
网友评论