js图片切换加动画效果

<div id="image-container">
  <img id="myImage" src="image1.jpg" alt="Sample Image">
</div>
<button id="switchButton">切换图片</button>

#image-container img {
  transition: opacity 0.5s ease-in-out;
}

const images = ['image1.jpg', 'image2.jpg', 'image3.jpg']; // 图片数组
let currentIndex = 0;
const imageElement = document.getElementById('myImage');
const switchButton = document.getElementById('switchButton');

switchButton.addEventListener('click', () => {
  currentIndex = (currentIndex + 1) % images.length; // 循环切换图片索引
  fadeOut(imageElement, () => {
    imageElement.src = images[currentIndex]; // 切换图片
    fadeIn(imageElement); // 淡入新图片
  });
});

function fadeOut(element, callback) {
  element.style.opacity = 0;
  element.addEventListener('transitionend', () => {
    callback();
  }, { once: true });
}

function fadeIn(element) {
  element.style.opacity = 1;
}