自适应banner特效 js

<div class="banner">
  <div class="slide active">Slide 1</div>
  <div class="slide">Slide 2</div>
  <div class="slide">Slide 3</div>
</div>
<button onclick="prevSlide()">Prev</button>
<button onclick="nextSlide()">Next</button>

.banner {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.slide {
  width: 100%;
  height: 300px;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}

.slide.active {
  display: block;
}

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

function showSlide(n) {
  slides.forEach((slide, index) => {
    slide.classList.remove('active');
  });
  slides[n].classList.add('active');
}

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

function prevSlide() {
  currentSlide = (currentSlide - 1 + slides.length) % slides.length;
  showSlide(currentSlide);
}

// Auto slide every 3 seconds
setInterval(nextSlide, 3000);