JavaScript 轮播图实现：代码示例与解释

以下是一个基本的轮播图实现，使用了 HTML、CSS 和 JavaScript。

HTML:

<div class='slideshow-container'>
  <div class='slide'>
    <img src='image1.jpg'>
  </div>
  <div class='slide'>
    <img src='image2.jpg'>
  </div>
  <div class='slide'>
    <img src='image3.jpg'>
  </div>
</div>

CSS:

.slideshow-container {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
}

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

.slide.active {
  opacity: 1;
}

JavaScript:

const slides = document.querySelectorAll('.slide');
let currentSlide = 0;

// 设置第一个幻灯片为活动状态
slides[currentSlide].classList.add('active');

// 启动幻灯片
setInterval(() => {
  // 从当前幻灯片中删除活动类
slides[currentSlide].classList.remove('active');
  
  // 移动到下一个幻灯片
currentSlide = (currentSlide + 1) % slides.length;
  
  // 将活动类添加到下一个幻灯片
slides[currentSlide].classList.add('active');
}, 5000);

这个轮播图会在每个图片上停留 5 秒钟，然后自动切换到下一张图片。