js图片渐变切换特效

<div id="image-container">
  <img id="image" src="first-image.jpg" alt="Image">
</div>
<button onclick="changeImage()">Change Image</button>

#image-container {
  position: relative;
  width: 500px;
  height: 300px;
}

#image {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: opacity 1s ease-in-out;
}

const images = ["first-image.jpg", "second-image.jpg", "third-image.jpg"];
let currentIndex = 0;

function changeImage() {
  const imageElement = document.getElementById('image');
  currentIndex = (currentIndex + 1) % images.length;
  imageElement.style.opacity = 0; // 开始淡出
  setTimeout(() => {
    imageElement.src = images[currentIndex]; // 切换图片
    imageElement.style.opacity = 1; // 开始淡入
  }, 1000); // 等待淡出完成
}

const preloadImages = (urls) => {
  urls.forEach(url => {
    const img = new Image();
    img.src = url;
  });
};

preloadImages(images);