纯 JavaScript 实现轮播图

轮播图是网页中常见的交互组件，通常用于展示图片或广告。本文将介绍如何使用纯 JavaScript 实现一个简单的轮播图，并深入探讨其中的实现原理。

实现思路

我们的轮播图需要能够自动播放、手动切换图片、支持无限循环、具有过渡效果等功能。为了实现这些功能，我们需要做以下几步：

创建图片容器和按钮容器，并将它们添加到页面中。
加载图片，并在图片加载完成后将其添加到图片容器中。
设置定时器，在规定的时间间隔内自动切换图片。
监听按钮点击事件，手动切换图片。
支持无限循环，即在最后一张图片和第一张图片之间切换。
添加过渡效果，使图片切换更加平滑。

代码实现

HTML 结构

首先我们需要创建一个包含图片容器和按钮容器的 HTML 结构：

---- ---------------
  ---- ----------------------------
  ---- -----------------------------
------

CSS 样式

为了使轮播图居中显示并具有良好的可读性，我们需要对其进行一些样式设置：

------- -
  --------- ---------
  ------ ------
  ------- ------
  ------- - -----
-

-------------- -
  --------- ---------
  ------ -----
  ------- -----
-

------------- -
  --------- ---------
  ---- --
  ----- --
  ------ -----
  ------- -----
  -------- --
  ----------- ------- ---- ------------
-

-------------------- -
  -------- --
-

--------------- -
  --------- ---------
  ------- -----
  ----- ----
  ---------- -----------------
-

-------------- -
  -------- -------------
  ------ -----
  ------- -----
  ------- - ----
  -------------- ----
  ----------------- -----
  ------- --------
-

--------------------- -
  ----------------- -----
-

其中，.slider 是包含图片容器和按钮容器的容器元素，.slider-images 是图片容器，.slider-image 是单张图片元素，.slider-buttons 是按钮容器，.slider-button 是单个按钮元素。

JavaScript 实现

接下来我们需要使用 JavaScript 实现轮播图的功能。首先我们需要定义一些变量：

----- ------ - ----------------------------------
----- --------------- - ---------------------------------------
----- ------ - --------------------------------------------------
----- ---------------- - ----------------------------------------
----- ------- - ----------------------------------------------------
----- ---------- - --------------
--- ------------ - --
--- ------- - -----

其中，slider 是包含图片容器和按钮容器的容器元素，imagesContainer 是图片容器，images 是单张图片元素的集合，buttonsContainer 是按钮容器，buttons 是单个按钮元素的集合，imageCount 是图片数量，currentIndex 是当前显示的图片索引，timerId 是定时器 ID。

接下来我们需要实现自动播放功能：

-------- --------------- -
  ------- - -------------- -- -
    ------------ - ------------- - -- - -----------
    ------------------------
  -- ------
-

----------------

其中，setInterval 方法用于设置定时器，每隔 3 秒钟切换一次图片。currentIndex 表示当前显示的图片索引，通过取模运算实现无限循环。

接下来我们需要实现手动切换图片的功能：

-------- ---------------------------- -
  --- ---- - - -- - - --------------- ----

- ---------------------------------------------------------- --------
-------------------------------------------------------------------------------------