前端小案例——轮播图（HTML+CSS+JS, 附源码）

一、前言

实现功能：

• 显示多张图片，每张图片占据轮播图容器的一部分空间。
• 实现向左和向右的切换按钮，可以点击按钮切换到上一张或下一张图片。
• 在底部显示小圆点，表示当前显示的图片，点击小圆点可以跳转到对应的图片。

实现逻辑：

1. 首先，使用querySelectorAll方法获取所有的轮播项元素，并将其保存在items变量中。

2. 定义一个全局变量current，用于记录当前显示的轮播项的索引，默认为0。通过操作current变量来控制显示的轮播项。并通过调用相关函数来更新显示和样式

3. 定义showSlide函数，用于显示当前的轮播项。通过遍历所有轮播项，设置其transform属性来实现水平滑动效果。同时，调用updateDots函数更新小圆点的样式。

4. 定义prevSlide函数，用于切换到上一张轮播项。如果current大于0，则将current减1；否则，将current设置为最后一张轮播项的索引。然后，调用showSlide函数显示对应的轮播项。

5. 定义nextSlide函数，用于切换到下一张轮播项。如果current小于轮播项的数量减1，则将current加1；否则，将current设置为0。然后，调用showSlide函数显示对应的轮播项。

6. 使用setInterval方法定义一个定时器timer，每隔3秒自动调用一次nextSlide函数，实现自动播放功能。

7. 定义pauseTimer函数，用于暂停定时器。通过调用clearInterval方法，清除定时器timer。

8. 定义resumeTimer函数，用于恢复定时器。重新设置定时器timer，调用nextSlide函数实现轮播功能。

9. 添加鼠标悬停和离开事件监听器，当鼠标悬停在轮播图上时，调用pauseTimer函数暂停自动播放；当鼠标离开时，调用resumeTimer函数恢复自动播放。

<