js滚动显示五张图片,鼠标指向图片暂停滚动

好的，以下是一个简单的实现方法：

HTML部分：

<div class="scroll-images">
  <img src="image1.jpg" alt="">
  <img src="image2.jpg" alt="">
  <img src="image3.jpg" alt="">
  <img src="image4.jpg" alt="">
  <img src="image5.jpg" alt="">
</div>

CSS部分：

.scroll-images {
  width: 500px;
  height: 300px;
  overflow: hidden;
  position: relative;
}

.scroll-images img {
  display: block;
  float: left;
  width: 100px;
  height: 100%;
  margin-right: 10px;
}

JavaScript部分：

var scrollTimer;
var scrollIndex = 0;
var scrollImages = document.querySelector('.scroll-images');
var images = scrollImages.querySelectorAll('img');

scrollTimer = setInterval(function() {
  scrollIndex++;
  if (scrollIndex >= images.length) {
    scrollIndex = 0;
  }
  scrollImages.scrollLeft = scrollIndex * (images[0].offsetWidth + 10);
}, 2000);

scrollImages.addEventListener('mouseenter', function() {
  clearInterval(scrollTimer);
});

scrollImages.addEventListener('mouseleave', function() {
  scrollTimer = setInterval(function() {
    scrollIndex++;
    if (scrollIndex >= images.length) {
      scrollIndex = 0;
    }
    scrollImages.scrollLeft = scrollIndex * (images[0].offsetWidth + 10);
  }, 2000);
});

代码解释：

首先，我们使用 `setInterval` 定时器来实现图片的滚动效果。在每次定时器触发时，我们将滚动的索引加一，然后设置容器的 `scrollLeft` 属性来让容器滚动到对应的位置。当滚动到最后一张图片时，我们将滚动的索引重置为零，从头开始滚动。

然后，我们添加了鼠标进入和离开容器时的事件监听器。当鼠标进入容器时，我们调用 `clearInterval` 函数来停止定时器，从而暂停图片的滚动。当鼠标离开容器时，我们重新启动定时器来继续图片的滚动。

最后，我们需要注意的是，在 CSS 中，我们将容器的 `overflow` 属性设置为 `hidden`，这样可以隐藏多余的图片，只显示容器的宽度范围内的图片，从而实现滚动的效果。而在 JavaScript 中，我们使用 `offsetWidth` 属性来获取图片的宽度，并且加上一个固定的值（这里是 10 像素），来计算滚动的距离。