将图像移动到图像集onClick的右侧或左侧

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

#image-gallery {
  width: 500px;
  height: 300px;
  overflow: hidden;
}

var imageGallery = document.getElementById("image-gallery");
var images = imageGallery.getElementsByTagName("img");
var currentIndex = 0;

function moveImage(direction) {
  if (direction === "right") {
    currentIndex++;
    if (currentIndex >= images.length) {
      currentIndex = 0;
    }
  } else if (direction === "left") {
    currentIndex--;
    if (currentIndex < 0) {
      currentIndex = images.length - 1;
    }
  }

  var newPosition = -currentIndex * 100; // 假设每个图像的宽度为100px
  for (var i = 0; i < images.length; i++) {
    images[i].style.left = newPosition + "%";
  }
}

// 绑定点击事件
document.getElementById("image1").addEventListener("click", function() {
  moveImage("right");
});

document.getElementById("image2").addEventListener("click", function() {
  moveImage("left");
});

document.getElementById("image3").addEventListener("click", function() {
  moveImage("left");
});