jquery的图片轮播效果的代码

<div class="slider">
  <div class="slide active">
    <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>
  <!-- 可以添加更多图片 -->
  <button class="prev">Prev</button>
  <button class="next">Next</button>
</div>

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

.slide {
  display: none;
  width: 100%;
}

.slide.active {
  display: block;
}

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

.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}

$(document).ready(function() {
  var slides = $('.slide');
  var currentIndex = 0;
  var slideInterval = setInterval(nextSlide, 3000); // 自动切换时间间隔

  function nextSlide() {
    slides.eq(currentIndex).removeClass('active');
    currentIndex = (currentIndex + 1) % slides.length;
    slides.eq(currentIndex).addClass('active');
  }

  $('.prev').click(function() {
    slides.eq(currentIndex).removeClass('active');
    currentIndex = (currentIndex - 1 + slides.length) % slides.length;
    slides.eq(currentIndex).addClass('active');
  });

  $('.next').click(function() {
    nextSlide();
  });

  // 防止在手动切换时自动切换
  slides.on('mouseenter', function() {
    clearInterval(slideInterval);
  }).on('mouseleave', function() {
    slideInterval = setInterval(nextSlide, 3000);
  });
});