根据点击事件动态更改传送带图像

<div id="carousel-container">
  <!-- 传送带图像内容 -->
</div>

#carousel-container {
  width: 500px;
  height: 200px;
  overflow: hidden;
  position: relative;
}

.carousel-image {
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.5s ease-in-out;
}

var carouselContainer = document.getElementById('carousel-container');
var carouselImages = carouselContainer.getElementsByClassName('carousel-image');
var currentIndex = 0;

carouselContainer.addEventListener('click', function() {
  // 更新当前显示图像的索引
  currentIndex = (currentIndex + 1) % carouselImages.length;
  
  // 更新传送带图像的位置
  for (var i = 0; i < carouselImages.length; i++) {
    var image = carouselImages[i];
    var translateX = (i - currentIndex) * 100 + '%';
    image.style.transform = 'translateX(' + translateX + ')';
  }
});