js实现图片滑动切换

<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>
</div>
<button onclick="prevSlide()">Prev</button>
<button onclick="nextSlide()">Next</button>

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

.slide {
  width: 100%;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}

.slide.active {
  display: block;
}

let currentSlide = 0;
const slides = document.querySelectorAll('.slide');

function showSlide(n) {
  slides[currentSlide].classList.remove('active');
  currentSlide = (n + slides.length) % slides.length;
  slides[currentSlide].classList.add('active');
}

function nextSlide() {
  showSlide(currentSlide + 1);
}

function prevSlide() {
  showSlide(currentSlide - 1);
}

// 自动播放功能（可选）
setInterval(nextSlide, 3000);

// 预加载图片
const images = document.querySelectorAll('.slide img');
images.forEach(img => {
  const newImg = new Image();
  newImg.src = img.src;
});