HTML/CSS/JS实现轮播图

<div class="slideshow-container">
  <div class="slideshow-slide active">
    <img src="image1.jpg" alt="Slide 1">
  </div>
  <div class="slideshow-slide">
    <img src="image2.jpg" alt="Slide 2">
  </div>
  <div class="slideshow-slide">
    <img src="image3.jpg" alt="Slide 3">
  </div>
</div>

.slideshow-container {
  position: relative;
  height: 400px;
  overflow: hidden;
}

.slideshow-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slideshow-slide.active {
  opacity: 1;
}

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

function showSlide(index) {
  slides[currentSlide].classList.remove('active');
  slides[index].classList.add('active');
  currentSlide = index;
}

function nextSlide() {
  let index = (currentSlide + 1) % slides.length;
  showSlide(index);
}

function prevSlide() {
  let index = currentSlide - 1;
  if (index < 0) {
    index = slides.length - 1;
  }
  showSlide(index);
}

setInterval(nextSlide, 3000);

通过一个包含所有图片的父容器，每个图片都是一个绝对定位的元素，只有当前图片的透明度是1，其余的透明度是0。

为了避免初次进入界面时，图片不显示的问题，为第一张图片设置类名为“active”，使第一张图片的透明度为1。

每张图片都有一个过渡效果，当前图片变为不活动状态时，透明度会渐渐变为0；当下一张图片变为活动状态时，透明度会渐渐变为1。

在JS代码中

1.函数showSlide(index)

        接受一个索引参数，表示要显示哪个图片

        首先将当前图片的透明度设置为0，然后将目标图片的透明度设置为1，并将当前图片的索引更新为目标图片的索引

2. 函数nextSlide()

        将当前图片的索引加1，然后调用showSlide()函数来显示下一张图片

3. 函数prevSlide()

        将当前图片的索引减1，当前图片为第一张时，切换到最后一张图片，然后调用showSlide()函数来显示上一张图片

3. setInterval()函数

        设置一个计时器，以便每隔3秒钟就自动切换到下一张图片