使用js实现图片的切换效果图

<div id="image-container">
  <img id="slider" src="image1.jpg" alt="Slider Image">
</div>
<button id="prev">Previous</button>
<button id="next">Next</button>

#image-container {
  width: 300px;
  height: 200px;
  overflow: hidden;
}

#slider {
  width: 100%;
  height: auto;
  transition: opacity 0.5s ease-in-out;
}

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

function changeImage(newIndex) {
  slider.style.opacity = 0; // 开始淡出
  setTimeout(() => {
    slider.src = images[newIndex]; // 切换图片
    slider.style.opacity = 1; // 开始淡入
  }, 500); // 等待淡出完成
}

document.getElementById('next').addEventListener('click', () => {
  currentIndex = (currentIndex + 1) % images.length;
  changeImage(currentIndex);
});

document.getElementById('prev').addEventListener('click', () => {
  currentIndex = (currentIndex - 1 + images.length) % images.length;
  changeImage(currentIndex);
});