js横向滚动条切换图片

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

#image-container {
  display: flex;
  overflow-x: scroll;
  width: 100%;
  scroll-snap-type: x mandatory;
}

#image-container img {
  width: 100%;
  scroll-snap-align: start;
}

document.getElementById('image-container').addEventListener('scroll', function() {
  const images = this.getElementsByTagName('img');
  for (let i = 0; i < images.length; i++) {
    if (this.scrollLeft >= images[i].offsetLeft && this.scrollLeft < images[i].offsetLeft + images[i].offsetWidth) {
      // 当前显示的图片索引为 i
      console.log('Current image index:', i);
      break;
    }
  }
});