js如何实现轮播效果

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

#carousel {
  width: 100%;
  overflow: hidden;
  position: relative;
}

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

#carousel img.active {
  opacity: 1;
}

const carouselImages = document.querySelectorAll('#carousel img');
let currentIndex = 0;

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

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

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

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