如何实现js手动滚动图片

要实现JavaScript手动滚动图片，你可以使用scrollTo方法或者直接设置元素的scrollLeft和scrollTop属性。以下是一个简单的例子，演示了如何通过按钮点击事件来滚动图片。

HTML部分：

<div id="gallery" style="overflow: hidden; white-space: nowrap; width: 300px;">
  <img src="image1.jpg" alt="Image 1" style="display: inline;">
  <img src="image2.jpg" alt="Image 2" style="display="inline;">
  <!-- 更多图片 -->
</div>
<button id="leftBtn">向左滚动</button>
<button id="rightBtn">向右滚动</button>

JavaScript部分：

const gallery = document.getElementById('gallery');
const leftBtn = document.getElementById('leftBtn');
const rightBtn = document.getElementById('rightBtn');
 
let scrollPosition = 0;
 
leftBtn.addEventListener('click', function() {
  scrollPosition += 100; // 每次向左滚动100px
  gallery.scrollTo({
    left: scrollPosition,
    behavior: 'smooth'
  });
});
 
rightBtn.addEventListener('click', function() {
  const maxScroll = gallery.scrollWidth - gallery.clientWidth;
  scrollPosition -= 100; // 每次向右滚动100px
  scrollPosition = Math.max(0, Math.min(maxScroll, scrollPosition)); // 防止溢出
  gallery.scrollTo({
    left: scrollPosition,
    behavior: 'smooth'
  });
});

在这个例子中，我们有一个包含多张图片的容器#gallery，并且设置了overflow: hidden来隐藏超出容器的部分。我们通过监听按钮点击事件来控制滚动位置。向左滚动时，scrollPosition增加；向右滚动时，scrollPosition减少，并确保不会滚动到容器外部。