第一种:
这个是之前写的,比较草率,没有注释,如果这个看不懂就去看第二个,比较仔细,主要是了解他,后面都会有一些插件来使用,很方便,只要几行代码就可写出各种各样的代码,所以,不懂的话,不要太在意,
第二种:
这个是最近刚写的,所以比较仔细,尽量多看看这个,跟步骤结合起来应该是能看懂的:
轮播图要实现的步骤和效果
1,显示和隐藏左右按钮
(1),鼠标移入,左右按钮显示
(2),鼠标离开,左右箭头隐藏
2,动态生成小圆点
(1)获取所有图片
(2)循环
(1),创建新的li
(2),把li添加到ol中
(3),给新的li设置索引号(自定义属性)
(4),给新的li注册点击事件
3,单击小圆点,小圆点呈现选中白色,移动图片
(1),排他样式
(1),去掉所有li的白色样式
(2),留下当前li(第一个默认为白色的小圆点)
(2),移动ul
(1),获取索引号(自定义属性的值)
(2),计算ul的移动位置(-索引号*图片的宽)
(3),使用动画函数,移动ul
4,单击右箭头,切换下一张图片
(1),切换下一张图片
(2),小圆点跟着变化
(3),无缝切换
(1),核心原理:复制了一个图片,放到ul的最后
(2),如果当前是最后一张,则瞬间回到第1张图片。
5,单击左箭头,切换上一张图片
6,自动轮播
(1),每隔2秒钟,触发右箭头的点击事件
7,(7)节流阀,避免狂点右箭头
(1),定义一个全局变量(开关变量)
(2),把要锁住的代码放到if判断中
(3),if判断中,先锁开关。flag = false
(4),animate的回调函数中,打开开关。flag = true
js代码
如果说需要那些公共样式或者哪里看不懂的地方的可以私聊我,我能帮你解答的一定帮你,希望可以一起进步,一起努力。
原作者姓名:Grocery store owner
原出处:CSDN
原文链接:原生js实现轮播图(两种方法)_no_one_but_you的博客-CSDN博客