js轮播图片小圆点变化_原生js如何实现轮播图效果？

第一种：

这个是之前写的，比较草率，没有注释，如果这个看不懂就去看第二个，比较仔细，主要是了解他，后面都会有一些插件来使用，很方便，只要几行代码就可写出各种各样的代码，所以，不懂的话，不要太在意，

第二种：

这个是最近刚写的，所以比较仔细，尽量多看看这个，跟步骤结合起来应该是能看懂的：

轮播图要实现的步骤和效果

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博客