css图片滚动点击暂停

CSS图片滚动点击暂停是常见的网页设计效果，通过CSS和JavaScript的组合实现；当鼠标悬浮在滚动图片上时暂停滚动，移开鼠标时继续滚动。
下面我们来简单介绍一下实现方法。

HTML代码：
<div class="scroll-picture">
  <img src="图片1.jpg">
  <img src="图片2.jpg">
</div>

CSS代码：
.scroll-picture{
  height: 400px;
  overflow: hidden;
}
.scroll-picture img{
  width: 100%;
  height: auto;
  display: inline-block;
}

JavaScript代码：
var speed = 50;//速度值，可调整
var scroll_picture = document.querySelector('.scroll-picture');
var imgs = scroll_picture.getElementsByTagName('img');
var len = imgs.length;
scroll_picture.innerHTML += scroll_picture.innerHTML;//复制一份图片，无缝滚动
scroll_picture.style.width = imgs[0].offsetWidth * (len + 1) + 'px';//设置滚动区域宽度
var step = 0;
var timer;

function startRoll() {//启动滚动
  timer = setInterval(roll,speed);
}
function roll() { //滚动图片
  if (scroll_picture.scrollLeft % imgs[0].offsetWidth == 0) {
    clearInterval(timer);
    setTimeout(startRoll,1000);//定时器延迟1秒后再次滚动
  } else {
    scroll_picture.scrollLeft += 1;
    if (scroll_picture.scrollLeft >= scroll_picture.offsetWidth / 2) {
      scroll_picture.scrollLeft = 0;
    }
  }
}
scroll_picture.onmouSEOver = function () {//停止滚动
  clearInterval(timer);
};
scroll_picture.onmouSEOut = function () {//继续滚动
  timer = setInterval(roll,speed);
};
startRoll();//启动滚动

通过以上代码实现了一个简单的CSS图片滚动点击暂停，只需要将图片添加到scroll-picture类的div容器内即可，JavaScript代码中的变量和函数可根据需求进行调整。