轮播图是网页中常见的交互组件，通常用于展示图片或广告。本文将介绍如何使用纯 JavaScript 实现一个简单的轮播图，并深入探讨其中的实现原理。
实现思路
我们的轮播图需要能够自动播放、手动切换图片、支持无限循环、具有过渡效果等功能。为了实现这些功能，我们需要做以下几步：
- 创建图片容器和按钮容器，并将它们添加到页面中。
- 加载图片，并在图片加载完成后将其添加到图片容器中。
- 设置定时器，在规定的时间间隔内自动切换图片。
- 监听按钮点击事件，手动切换图片。
- 支持无限循环，即在最后一张图片和第一张图片之间切换。
- 添加过渡效果，使图片切换更加平滑。
代码实现
HTML 结构
首先我们需要创建一个包含图片容器和按钮容器的 HTML 结构：
<div class="slider"> <div class="slider-images"></div> <div class="slider-buttons"></div> </div>
CSS 样式
为了使轮播图居中显示并具有良好的可读性，我们需要对其进行一些样式设置：
-- -------------------- ---- ------- ------- - --------- --------- ------ ------ ------- ------ ------- - ----- - -------------- - --------- --------- ------ ----- ------- ----- - ------------- - --------- --------- ---- -- ----- -- ------ ----- ------- ----- -------- -- ----------- ------- ---- ------------ - -------------------- - -------- -- - --------------- - --------- --------- ------- ----- ----- ---- ---------- ----------------- - -------------- - -------- ------------- ------ ----- ------- ----- ------- - ---- -------------- ---- ----------------- ----- ------- -------- - --------------------- - ----------------- ----- -
其中，.slider 是包含图片容器和按钮容器的容器元素，.slider-images 是图片容器，.slider-image 是单张图片元素，.slider-buttons 是按钮容器，.slider-button 是单个按钮元素。
JavaScript 实现
接下来我们需要使用 JavaScript 实现轮播图的功能。首先我们需要定义一些变量：
const slider = document.querySelector('.slider');
const imagesContainer = slider.querySelector('.slider-images');
const images = imagesContainer.querySelectorAll('.slider-image');
const buttonsContainer = slider.querySelector('.slider-buttons');
const buttons = buttonsContainer.querySelectorAll('.slider-button');
const imageCount = images.length;
let currentIndex = 0;
let timerId = null;其中，slider 是包含图片容器和按钮容器的容器元素，imagesContainer 是图片容器，images 是单张图片元素的集合，buttonsContainer 是按钮容器，buttons 是单个按钮元素的集合，imageCount 是图片数量，currentIndex 是当前显示的图片索引，timerId 是定时器 ID。
接下来我们需要实现自动播放功能：
function startAutoPlay() {
timerId = setInterval(() => {
currentIndex = (currentIndex + 1) % imageCount;
showImage(currentIndex);
}, 3000);
}
startAutoPlay();其中，setInterval 方法用于设置定时器，每隔 3 秒钟切换一次图片。currentIndex 表示当前显示的图片索引，通过取模运算实现无限循环。
接下来我们需要实现手动切换图片的功能：
function setButtonActive(buttonIndex) {
for (let i = 0; i < buttons.length; i++)
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/1816) ，转载请注明来源
[https://www.javascriptcn.com/post/1816](https://www.javascriptcn.com/post/1816)