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

您可以通过以下代码实现：

HTML结构：

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

CSS样式：

.img-container {
  width: 500px; /*设置容器宽度*/
  height: 300px; /*设置容器高度*/
  overflow: hidden; /*隐藏溢出部分*/
  position: relative; /*设置相对定位*/
}

.img-container img {
  width: 500px; /*设置图片宽度*/
  height: 300px; /*设置图片高度*/
  position: absolute; /*设置绝对定位*/
  top: 0; /*设置顶部位置*/
  left: 0; /*设置左侧位置*/
  opacity: 0; /*设置透明度为0*/
  transition: opacity 0.5s ease-in-out; /*设置渐变动画效果*/
}

.img-container img.active {
  opacity: 1; /*设置透明度为1*/
}

.img-container:hover img {
  opacity: 0.5; /*设置鼠标悬停时的透明度*/
}

JavaScript代码：

var imgs = document.querySelectorAll(".img-container img");
var index = 0;
var intervalId;

function changeImage() {
  for (var i = 0; i < imgs.length; i++) {
    imgs[i].classList.remove("active");
  }
  index++;
  if (index >= imgs.length) {
    index = 0;
  }
  imgs[index].classList.add("active");
}

intervalId = setInterval(changeImage, 2000);

var imgContainer = document.querySelector(".img-container");
imgContainer.addEventListener("mouseover", function() {
  clearInterval(intervalId);
});

imgContainer.addEventListener("mouseout", function() {
  intervalId = setInterval(changeImage, 2000);
});

JavaScript代码实现了图片的滚动和鼠标悬停暂停的效果，您可以根据需要进行修改。