写一个前端图片横向滚动，鼠标移入暂停

可以使用 CSS 和 JavaScript 实现前端图片横向滚动，鼠标移入暂停的效果，以下是一个简单的实现方式：

HTML 结构：

<div class="scroll-wrapper">
  <ul class="scroll-list">
    <li><img src="image1.jpg"></li>
    <li><img src="image2.jpg"></li>
    <li><img src="image3.jpg"></li>
    <li><img src="image4.jpg"></li>
    <li><img src="image5.jpg"></li>
  </ul>
</div>

CSS 样式：

.scroll-wrapper {
  width: 100%;
  overflow-x: scroll;
  white-space: nowrap;
  position: relative;
}

.scroll-list {
  display: inline-block;
  position: relative;
}

.scroll-list li {
  display: inline-block;
  margin-right: 20px;
}

.scroll-list li:last-child {
  margin-right: 0;
}

JavaScript 代码：

var scrollWrapper = document.querySelector('.scroll-wrapper');
var scrollList = document.querySelector('.scroll-list');
var isPaused = false;

// 鼠标移入暂停滚动
scrollWrapper.addEventListener('mouseenter', function() {
  isPaused = true;
});

// 鼠标移出重新开始滚动
scrollWrapper.addEventListener('mouseleave', function() {
  isPaused = false;
});

function scroll() {
  if (isPaused) {
    return;
  }
  // 每 10 毫秒滚动 1 像素
  scrollWrapper.scrollLeft += 1;
  if (scrollWrapper.scrollLeft >= scrollList.offsetWidth - scrollWrapper.offsetWidth) {
    scrollWrapper.scrollLeft = 0;
  }
  requestAnimationFrame(scroll);
}

// 开始滚动
scroll();

上述代码中，我们使用了 CSS 的 `white-space: nowrap` 属性，使得 `.scroll-list` 中的 `li` 元素不换行，从而实现横向排列。然后使用 JavaScript 控制滚动，每 10 毫秒滚动 1 像素，直到滚动到最后一个元素时，将滚动位置重置为 0，继续滚动。鼠标移入时，设置一个 `isPaused` 标志位，使得滚动停止；鼠标移出时，将 `isPaused` 标志位设置为 `false`，重新开始滚动。