如何使用纯CSS、JS实现图片轮播效果

介绍

图片轮播是现代网站中常用的功能，尤其在电商网站中更甚。它可以让用户方便地浏览大量的图片并增强网站的设计美感。这篇文章将介绍如何使用纯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开发中实现一个漂亮和功能强大的图片轮播！