在圆滑的轮播幻灯片更改上切换动画css类

<div class="carousel-container">
  <div class="slide"></div>
  <div class="slide"></div>
  <div class="slide"></div>
</div>

.carousel-container {
  width: 500px;
  height: 300px;
  overflow: hidden;
}

.slide {
  width: 100%;
  height: 100%;
  background-image: url('slide1.jpg');
  background-size: cover;
  transition: transform 0.5s ease;
}

// 获取幻灯片元素
const slides = document.querySelectorAll('.slide');
let currentIndex = 0;

// 切换到下一个幻灯片
function nextSlide() {
  // 移除当前幻灯片的active类
  slides[currentIndex].classList.remove('active');
  
  // 计算下一个幻灯片的索引
  currentIndex = (currentIndex + 1) % slides.length;
  
  // 添加下一个幻灯片的active类
  slides[currentIndex].classList.add('active');
}

// 设置定时器，每隔一段时间切换到下一个幻灯片
setInterval(nextSlide, 3000);

.slide {
  /* ... */
  opacity: 0;
  transition: opacity 0.5s ease;
}

.slide.active {
  opacity: 1;
}