js实现图片自动播放

<div id="image-carousel">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

#image-carousel {
  width: 100%;
  overflow: hidden;
  position: relative;
}

#image-carousel img {
  width: 100%;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}

document.addEventListener("DOMContentLoaded", function() {
  const images = document.querySelectorAll("#image-carousel img");
  let currentIndex = 0;

  function showImage(index) {
    images.forEach((img, i) => {
      img.style.display = i === index ? "block" : "none";
    });
  }

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

  // 初始显示第一张图片
  showImage(currentIndex);

  // 设置定时器，每隔3秒切换到下一张图片
  setInterval(nextImage, 3000);
});

function preloadImages(images) {
  images.forEach(img => {
    const newImg = new Image();
    newImg.src = img.src;
  });
}

preloadImages(images);

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