介绍
图片轮播是现代网站中常用的功能，尤其在电商网站中更甚。它可以让用户方便地浏览大量的图片并增强网站的设计美感。这篇文章将介绍如何使用纯CSS和JS实现一个基本的图片轮播效果。
HTML结构
我们首先需要一个HTML结构来放置轮播图片。这里我们使用一个简单的\<div>元素并包裹\<img>元素来实现。代码如下所示：
<div class="slider">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
</div>
我们将使用CSS来对其进行样式设置，并使用JavaScript来实现图片轮播。
基本CSS样式
首先，我们要给轮播的图片一个基本的样式，包括宽度、高度和位置。我们还可以添加其他样式来美化它们。代码如下所示：
/* 轮播的基本样式 */
.slider {
width: 100%;
height: 400px;
position: relative;
overflow: hidden;
}
.slider img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
我们将构建一个可以自动播放的简单轮播，每秒更换一张图片。我们将使用JavaScript来控制它。
JavaScript代码
我们将使用类似于setTimeout()函数的计时器函数来实现自动图片轮播。在这里，我们将使用setInterval()函数。这个函数将每隔一定时间（单位为毫秒），执行一个指定的函数。我们可以将它的返回值存储在一个变量中，以便稍后可以使用clearInterval()函数停止计时器。
let sliderTimer = setInterval(function() {
// 在这里写需要执行的代码
}, 5000); // 时间以毫秒为单位
我们想要轮播下一张图片时，我们需要使用JavaScript来更改当前显示的图片。我们可以使用CSS来更改当前图片的opacity属性以实现淡入淡出的效果。代码如下所示：
/* 轮播样式：淡入淡出 */
.slider img {
/* 其他样式... */
opacity: 0;
transition: opacity .5s ease-in-out;
}
.slider img.active {
opacity: 1;
}
现在，我们需要使用JavaScript来更新“active”类并切换到下一张图片。我们将使用一个变量来跟踪当前显示的图片，然后更新该变量以指向要显示的下一张图片。我们还需要编写一些代码来确保在我们到达最后一张图像时，重新开始从第一张图像开始轮播。代码如下所示：
let images = document.querySelectorAll('.slider img');
let currentImage = 0;
function slide() {
// 隐藏当前图片
images[currentImage].classList.remove('active');
// 增加当前图片的变量
currentImage = (currentImage + 1) % images.length;
// 显示下一张图片
images[currentImage].classList.add('active');
}
// 调用slide()函数，开始轮播
slide();
// 定时器
let sliderTimer = setInterval(slide, 5000);
// 停止轮播
// clearInterval(sliderTimer);
解释
我们使用querySelectorAll()方法来选择图片并将其存储在变量“images”中。接下来，我们创建一个初始变量“currentImage”，它将设置为0，即第一张图片。之后，我们定义了一个名为“slide()”的函数来控制图片的变化。在这个函数中，我们首先将当前显示的图片“currentImage”隐藏，然后递增当前变量的值，以便更改到下一张图片。我们使用模运算符确保在我们到达最后一张图像时，重新开始从头开始。之后，我们将新的当前图片设置为“active”，即显示。最后，我们使用setInterval()函数来调用此函数，并将其存储在“sliderTimer”变量中。我们可以使用clearInterval()函数停止计时器。
结束语
在这篇文章中，我们使用纯CSS和JS实现了一个基本的图片轮播效果。我们可以扩展此功能来添加更多控件，例如：翻页控件和导航控件，以使轮播更加交互和易于使用。希望这篇文章和代码能够帮助您在您的Web开发中实现一个漂亮和功能强大的图片轮播！