html鼠标滑轮换图片,JavaScript实现鼠标滚轮控制页面图片切换

好的，这是一个非常常见的交互效果，我可以为您提供一个简单的实现方法。

HTML代码：

<div class="gallery">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
  <img src="image4.jpg" alt="Image 4">
</div>

CSS代码：

.gallery {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  height: 400px;
  width: 800px;
}

img {
  scroll-snap-align: center;
  height: 400px;
  width: 800px;
}

JavaScript代码：

const gallery = document.querySelector('.gallery');
let isScrolling = false;

gallery.addEventListener('wheel', (event) => {
  event.preventDefault();

  if (isScrolling) return;

  isScrolling = true;

  setTimeout(() => {
    isScrolling = false;
  }, 1000);

  const delta = event.deltaY;
  const scrollLeft = gallery.scrollLeft;

  gallery.scrollTo({
    left: scrollLeft + delta,
    behavior: 'smooth'
  });
});

解释一下代码：

- 我们首先定义了一个包含多个图片的 `div` 元素，并设置其为可滚动的。
- 然后我们定义了一个 `wheel` 事件监听器，当用户滚动滚轮时就会触发此事件。
- 我们在事件处理程序中首先阻止默认滚动行为，然后检查是否已经在滚动中，如果是，则不执行任何操作。
- 如果不是，则将 `isScrolling` 标志设置为 `true`，并在1秒钟后将其设置为 `false`。
- 接下来，我们获取鼠标滚动的方向和当前已滚动的距离，并使用 `scrollTo` 方法将滚动位置设置为当前位置加上滚动量。

这样，当用户滚动滚轮时，页面上的图片就会根据滚动方向进行相应的切换。当然，您可以根据实际需求对代码进行修改和优化。