原生JS制作轮播图（详细步骤分析）

PC端轮播图

1、功能需求

1. 鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。

2. 点击右侧按钮一次，图片往左播放一张，以此类推， 左侧按钮同理。

3. 图片播放的同时，下面小圆圈模块跟随一起变化。

4. 点击小圆圈，可以播放相应图片。

5. 鼠标不经过轮播图， 轮播图也会自动播放图片。

6. 鼠标经过，轮播图模块， 自动播放停止。

 

2、案例分析

第1，2步

① 因为 js 较多，我们单独新建 js 文件夹，再新建 js 文件， 引入页面中。

② 此时需要添加 load 事件。

③ 鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。

④ 显示隐藏 display 按钮。

 

第3步

① 动态生成小圆圈

② 核心思路：小圆圈的个数要跟图片张数一致

③ 所以首先先得到 ul 里面图片的张数（图片放入 li 里面，所以就是 li 的个数）

④ 利用循环动态生成小圆圈（这个小圆圈要放入 ol 里面）

⑤ 创建节点 createElement(‘li’)

⑥ 插入节点 ol. appendChild(li)

⑦ 第一个小圆圈需要添加 current 类

 

第4步