js动画banner动态显示

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

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

#banner img {
  position: absolute;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

#banner img.active {
  opacity: 1;
}

const images = document.querySelectorAll('#banner img');
let currentIndex = 0;

function showNextImage() {
  // Hide current image
  images[currentIndex].classList.remove('active');

  // Move to next image
  currentIndex = (currentIndex + 1) % images.length;

  // Show next image
  images[currentIndex].classList.add('active');
}

// Set interval to change image every 3 seconds
setInterval(showNextImage, 3000);