banner全屏切换js

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

.banner {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

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

.slide.active {
  opacity: 1;
}

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

function showSlide(index) {
  slides.forEach((slide, i) => {
    slide.classList.toggle('active', i === index);
  });
}

function nextSlide() {
  currentIndex = (currentIndex + 1) % slides.length;
  showSlide(currentIndex);
}

setInterval(nextSlide, 3000); // 每 3 秒切换一次