利用 HTML、CSS、JavaScript 实现轮播图

HTML 结构

轮播图的 HTML 结构需要两个主要的部分：

包含轮播图片的容器，比如 div，在这个容器内部有多个用于展示图片的 img 元素，这些 img 元素可以通过 CSS 的方式来控制排列。
突出显示当前图片的指示器，比如小圆点。

下面是一个简单的轮播图的 HTML 代码结构：

<div class="slider">
  <img src="image-1.jpg" alt="image-1">
  <img src="image-2.jpg" alt="image-2">
  <img src="image-3.jpg" alt="image-3">
  <img src="image-4.jpg" alt="image-4">
  <div class="slider-indicators">
    <span class="active"></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

CSS 样式

轮播图的 CSS 样式主要是控制图片的布局和动画效果，还有指示器的样式设置。下面是一个简单的实现轮播图样式的 CSS 代码：

.slider {
  position: relative;
  width: 100%;
  height: 500px;
}

.slider img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s;
}

.slider img.active {
  opacity: 1;
}

.slider-indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.slider-indicators span {
  width: 10px;
  height: 10px;
  background-color: #fff;
  border-radius: 50%;
  margin-right: 10px;
  cursor: pointer;
}

.slider-indicators span.active {
  background-color: #000;
}

JavaScript 逻辑

利用 JavaScript 实现轮播图需要掌握以下技能：

计算轮播图的宽度或高度，用于图片的滑动和展示。
图片滑动的动画效果。
指示器的控制和切换。

下面是一个简单的 JavaScript 代码实现：

const slider = document.querySelector('.slider');
const imgs = slider.querySelectorAll('img');
const indicators = slider.querySelectorAll('.slider-indicators span');
let index = 0;

function showImg() {
  imgs.forEach((img) => {
    img.classList.remove('active');
  });
  imgs[index].classList.add('active');
}

function showIndicator() {
  indicators.forEach((indicator) => {
    indicator.classList.remove('active');
  });
  indicators[index].classList.add('active');
}

function next() {
  index++;
  if (index === imgs.length) {
    index = 0;
  }
  showImg();
  showIndicator();
}

let intervalId = setInterval(next, 3000);

slider.addEventListener('mouseover', () => {
  clearInterval(intervalId);
});

slider.addEventListener('mouseout', () => {
  intervalId = setInterval(next, 3000);
});

indicators.forEach((indicator, i) => {
  indicator.addEventListener('click', () => {
    index = i;
    showImg();
    showIndicator();
  });
});

这段代码实现了轮播图的以下功能：

鼠标放在轮播图上时，轮播图停止自动切换。
鼠标移开轮播图后，轮播图重新开始自动切换。
点击指示器时，切换到相应的图片。

示例说明

这是一个基础的轮播图实现方法，以下两个示例将具体说明如何利用 HTML、CSS、JavaScript 实现轮播图。

示例一

假设有 3 张轮播图片，可以先用 HTML 代码创建轮播图的结构：

<div class="slider">
  <img src="./img1.jpg" alt="img1">
  <img src="./img2.jpg" alt="img2">
  <img src="./img3.jpg" alt="img3">
  <div class="slider-indicators">
    <span class="active"></span>
    <span></span>
    <span></span>
  </div>
</div>

其中，.active 类表示当前显示的图片。

接下来，可以用 CSS 样式设置轮播图的样式：

.slider {
  position: relative;
  width: 600px;
  height: 400px;
  margin: 30px auto;
  overflow: hidden;
}

.slider img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s;
}

.slider img.active {
  opacity: 1;
}

.slider-indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.slider-indicators span {
  width: 10px;
  height: 10px;
  background-color: #fff;
  border-radius: 50%;
  margin-right: 10px;
  cursor: pointer;
}

.slider-indicators span.active {
  background-color: #000;
}

这段 CSS 样式能够设置图片的布局、样式，以及指示器的样式。

最后，可以用 JavaScript 代码实现轮播图的自动切换和手动切换：

const slider = document.querySelector('.slider');
const imgs = slider.querySelectorAll('img');
const indicators = slider.querySelectorAll('.slider-indicators span');
let index = 0;

function showImg() {
  imgs.forEach((img) => {
    img.classList.remove('active');
  });
  imgs[index].classList.add('active');
}

function showIndicator() {
  indicators.forEach((indicator) => {
    indicator.classList.remove('active');
  });
  indicators[index].classList.add('active');
}

function next() {
  index++;
  if (index === imgs.length) {
    index = 0;
  }
  showImg();
  showIndicator();
}

let intervalId = setInterval(next, 3000);

slider.addEventListener('mouseover', () => {
  clearInterval(intervalId);
});

slider.addEventListener('mouseout', () => {
  intervalId = setInterval(next, 3000);
});

indicators.forEach((indicator, i) => {
  indicator.addEventListener('click', () => {
    index = i;
    showImg();
    showIndicator();
  });
});

以上代码实现了轮播图的自动切换和手动切换功能。

示例二

有的时候，需要创建垂直方向的轮播图，可以对 CSS 样式进行一些修改，使之垂直展示。HTML 结构代码不变。

CSS 样式修改如下所示：

.slider {
  position: relative;
  width: 600px;
  height: 400px;
  margin: 30px auto;
  overflow: hidden;
}

.slider img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s;
}

.slider img.active {
  opacity: 1;
}

.slider-indicators {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
}

.slider-indicators span {
  width: 10px;
  height: 10px;
  background-color: #fff;
  border-radius: 50%;
  margin-bottom: 10px;
  cursor: pointer;
}

.slider-indicators span.active {
  background-color: #000;
}

这样做会使轮播图和指示器展示在垂直方向，而非水平方向。

接下来，可以用 JavaScript 代码实现轮播图的自动切换和手动切换，代码不变。