美文网首页
17.1.24 轮播思路

17.1.24 轮播思路

作者: _v_xw | 来源:发表于2017-01-24 18:35 被阅读0次

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

    相关文章

      网友评论

          本文标题:17.1.24 轮播思路

          本文链接:https://www.haomeiwen.com/subject/uiozbttx.html