js做banner

<div class="banner">
  <div class="slides">
    <div class="slide"><img src="image1.jpg" alt="Image 1"></div>
    <div class="slide"><img src="image2.jpg" alt="Image 2"></div>
    <div class="slide"><img src="image3.jpg" alt="Image 3"></div>
  </div>
  <button class="prev">&#10094;</button>
  <button class="next">&#10095;</button>
</div>

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

.slides {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.slide {
  min-width: 100%;
  height: 300px;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0,0,0,0.5);
  color: white;
  border: none;
  padding: 16px;
  cursor: pointer;
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}

let slideIndex = 0;
showSlides();

function showSlides() {
  const slides = document.querySelectorAll('.slide');
  slides.forEach(slide => slide.style.display = 'none');
  slideIndex++;
  if (slideIndex > slides.length) { slideIndex = 1 }
  slides[slideIndex-1].style.display = 'block';
  setTimeout(showSlides, 2000); // Change image every 2 seconds
}

document.querySelector('.prev').addEventListener('click', () => {
  slideIndex--;
  showSlides();
});

document.querySelector('.next').addEventListener('click', () => {
  slideIndex++;
  showSlides();
});