javascript实现图片循环滚动效果

可以使用以下代码实现图片循环滚动效果：

HTML代码：

<div class="slider">
  <div class="slider-container">
    <img src="img1.jpg">
    <img src="img2.jpg">
    <img src="img3.jpg">
    <img src="img4.jpg">
  </div>
</div>

CSS代码：

.slider {
  overflow: hidden;
}

.slider-container {
  display: flex;
  width: 400%;
  animation: slide 10s infinite linear;
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

.slider-container img {
  width: 25%;
}

JavaScript代码：

var slider = document.querySelector('.slider');
var container = document.querySelector('.slider-container');
var imgs = container.querySelectorAll('img');

var imgWidth = imgs[0].width;
var containerWidth = imgWidth * imgs.length;

container.style.width = containerWidth + 'px';

slider.addEventListener('mouseenter', function() {
  container.style.animationPlayState = 'paused';
});

slider.addEventListener('mouseleave', function() {
  container.style.animationPlayState = 'running';
});

这段代码使用了flex布局和CSS动画来实现图片循环滚动效果。JavaScript代码用来处理图片容器的宽度和鼠标悬停事件。当鼠标悬停在图片上时，动画会暂停，当鼠标移开时，动画会继续播放。