jquery百叶窗式图片轮播代码实现

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

.slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

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

.slide img {
  width: 100%;
  height: auto;
}

$(document).ready(function() {
  var slides = $('.slide');
  var currentSlide = 0;

  function showSlide(index) {
    slides.eq(currentSlide).fadeOut(1000);
    slides.eq(index).fadeIn(1000);
    currentSlide = index;
  }

  function nextSlide() {
    var nextIndex = (currentSlide + 1) % slides.length;
    showSlide(nextIndex);
  }

  // 初始化显示第一张图片
  showSlide(currentSlide);

  // 设置定时器自动切换图片
  setInterval(nextSlide, 3000);
});