js实现网页轮播图：超详细步骤【新手指北】

先上HTML及CSS代码：【此部分不再多加讲解，本章主要对js部分重点描述】

 

 接下来js开始逐步拆解：

首先写一个缓冲运动函数和获取元素实时位置的函数

ps:为了更方便阅读，把更多的解释写在了代码上面

1.获取三个节点：

标签以及下面的

标签的集合和

标签

2.创建for循环，变量 i < li 的长度

3.在页面中打印出 li 标签，创建的个数为图片的个数

4.给 li 标签添加文本为：li 的下标 0-4 统统 + 1 = 1-5

5.将li追加到ol中

6.设置条件变量 i == 0 的时候，第一个 li 添加类名'current'

7.给所有的 li 绑定点击事件

 8.序列号回调函数，获取当前图片序列号

9.计算ul的left值

克隆第一张图片是为了轮播图切换到最后一张的时候能够无缝切换回第一张

 

 设置左右箭头点击函数