当光标悬停在图像上时，如何让图像左右移动？

<div id="image-container">
  <img src="your-image.jpg" alt="Your Image">
</div>

#image-container {
  width: 500px;
  height: 300px;
  position: relative;
  overflow: hidden;
}

#image-container img {
  position: absolute;
  left: 0;
  transition: left 0.5s ease; /* 添加过渡效果，使图像移动更平滑 */
}

#image-container:hover img {
  cursor: pointer; /* 鼠标悬停时显示手型光标 */
}

var imageContainer = document.getElementById('image-container');
var image = imageContainer.querySelector('img');

imageContainer.addEventListener('mousemove', function(event) {
  var containerWidth = imageContainer.offsetWidth;
  var imageWidth = image.offsetWidth;
  var mouseX = event.clientX - imageContainer.getBoundingClientRect().left;
  var maxOffset = containerWidth - imageWidth;
  var offset = (mouseX / containerWidth) * maxOffset;

  image.style.left = offset + 'px';
});