js多张图片切换

<div id="imageSlider">
  <img id="sliderImage" src="image1.jpg" alt="Slider Image">
  <button onclick="prevImage()">Prev</button>
  <button onclick="nextImage()">Next</button>
</div>

#imageSlider {
  position: relative;
  width: 600px;
  height: 400px;
}

#sliderImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

const images = ["image1.jpg", "image2.jpg", "image3.jpg"];
let currentIndex = 0;

function showImage(index) {
  document.getElementById('sliderImage').src = images[index];
}

function nextImage() {
  currentIndex = (currentIndex + 1) % images.length;
  showImage(currentIndex);
}

function prevImage() {
  currentIndex = (currentIndex - 1 + images.length) % images.length;
  showImage(currentIndex);
}

// Optional: Auto-play functionality
setInterval(nextImage, 3000); // Change image every 3 seconds