js实现渐变轮播图

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

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

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

.slides img {
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slides img.active {
  opacity: 1;
}

const slides = document.querySelectorAll('.slides img');
let currentIndex = 0;

function showSlide(index) {
  slides.forEach((slide, i) => {
    slide.classList.toggle('active', i === index);
  });
}

function nextSlide() {
  currentIndex = (currentIndex + 1) % slides.length;
  showSlide(currentIndex);
}

// 初始化第一张图片
showSlide(currentIndex);

// 设置定时器自动切换图片
setInterval(nextSlide, 3000); // 每3秒切换一次