js实现淡入淡出轮播

<div id="carousel">
  <img src="image1.jpg" alt="Image 1" class="carousel-item">
  <img src="image2.jpg" alt="Image 2" class="carousel-item">
  <img src="image3.jpg" alt="Image 3" class="carousel-item">
</div>
<button id="prev">Previous</button>
<button id="next">Next</button>

#carousel {
  position: relative;
  width: 600px;
  height: 400px;
  overflow: hidden;
}

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

.carousel-item.active {
  opacity: 1;
}

const carouselItems = document.querySelectorAll('.carousel-item');
let currentIndex = 0;

function showItem(index) {
  carouselItems.forEach((item, i) => {
    item.classList.remove('active');
  });
  carouselItems[index].classList.add('active');
}

document.getElementById('next').addEventListener('click', () => {
  currentIndex = (currentIndex + 1) % carouselItems.length;
  showItem(currentIndex);
});

document.getElementById('prev').addEventListener('click', () => {
  currentIndex = (currentIndex - 1 + carouselItems.length) % carouselItems.length;
  showItem(currentIndex);
});

// 自动轮播
setInterval(() => {
  currentIndex = (currentIndex + 1) % carouselItems.length;
  showItem(currentIndex);
}, 3000);

// 初始化显示第一张图片
showItem(currentIndex);