用JavaScript写一个简单的轮播图

心已赠人 2022-11-26 10:57 193阅读 0赞

# 用JavaScript写一个简单的轮播图 #

**首先我们先设置好结构和样式**

基本结构如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpdHRsZV9tb25zdGVyXzE_size_16_color_FFFFFF_t_70_pic_center]  
页面效果：  
![啊][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpdHRsZV9tb25zdGVyXzE_size_16_color_FFFFFF_t_70_pic_center 1]  
？思考（首先我们需要做些什么）：

*  获取元素
 *  注册事件（上一张 / 下一张图片；小圆；鼠标放在wrap里时，鼠标离开weap时）
 *  删除active类的函数（按钮 / 小圆）
 *  添加active类的函数（按钮 / 小圆）
 *  执行函数
 *  定时器
 *  清除定时器  
    **以上，后面我们开始来写代码**

#### 1，获取元素 ####

![在这里插入图片描述][20200812004532362.png_pic_center]

#### 2，注册事件 ####

这里我们把事件的执行代码封装成函数（这里mouseenter和mouseleave的鼠标事件先不考虑）  
我们给每一个小圆（li）设置了一个自定义属性data-index；属性值从 0 开始，表示当前点击的小圆是哪一个小圆  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpdHRsZV9tb25zdGVyXzE_size_16_color_FFFFFF_t_70_pic_center 2]

#### 3，按钮和小圆点的执行函数 ####

这里我们需要先设置一个index变量，然后在去写我们的执行函数；  
index这个变量主要是由于确定当前显示的图片为第几张，因为我们  
var items = document.getElementsByClassName(‘item’);  
获取过来的items是一个伪数组，数组的下标是从 0 开始，所以  
给变量设置初始值为：var index = 0;  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpdHRsZV9tb25zdGVyXzE_size_16_color_FFFFFF_t_70_pic_center 3]

#### 4，删除与添加active ####

每执行一次按钮或小圆的点击事件时，我们需要先删除掉之前添加过active的li ，然后在重新给目标元素 li 添加上active

*  这里我们给所有图片和小圆重新给上item这个类名，这样带有active的图片和小圆就失去了active这个类  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpdHRsZV9tb25zdGVyXzE_size_16_color_FFFFFF_t_70_pic_center 4]

### 5，定时器 ###

当然，以上代码并没有实现我们想要的自动轮播图的效果，因为我们还缺少一个东西：**定时器**  
***js 定时器有以下两个方法：***  
setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。  
setTimeout() ：在指定的毫秒数后调用函数或计算表达式。  
*1000毫秒 == 1秒*  
***清除定时器***  
定时器清除的方法：*对于的定时器使用对应的清除方法*

*  clearInterval(obj) =》清除setInterval()
 *  clearTimeout(obj) =》清除setTimeout()

添加定时器和 mouseenter 和 mouseleave 的鼠标事件

记得清除了定时器后，在重新给定时器时，要重新让变量 timer 重新接收![在这里插入图片描述][20200812012820296.png_pic_center]

#### 以下有感兴趣的可以了解一下 ####

***mouseover和mouseenter的区别***  
***mouseout和mouseleave的区别***

***@[小小怪][Link 1]***

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpdHRsZV9tb25zdGVyXzE_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/f09c100cbae34bc3bc770beadc2f7ed9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpdHRsZV9tb25zdGVyXzE_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221124/86d4b21ae803449bbbf51321085141df.png
[20200812004532362.png_pic_center]: /images/20221124/ef171b9c0832484ab13da2436c980d2d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpdHRsZV9tb25zdGVyXzE_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221124/cd745b190c9e451dbddb8ddb41220d83.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpdHRsZV9tb25zdGVyXzE_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221124/73168a0c0fdd47ce9d86dae9629db9bd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpdHRsZV9tb25zdGVyXzE_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221124/adf69bb055ef4b678db93584b1962e29.png
[20200812012820296.png_pic_center]: /images/20221124/d4d35e708411421694e4fe93dbbaea39.png
[Link 1]: https://blog.csdn.net/Little_monster_1