css如何让图片横向无限滚动

CSS可以很方便地实现图片横向无限滚动的效果，只需要设置一些简单的样式就可以了。

.scroll-wrapper {
  width: 100%;
  height: 200px;
  overflow-x: scroll;
  white-space: Nowrap;
}

.scroll-item {
  display: inline-block;
  height: 100%;
  margin-right: 20px;
}

/* 可选设置，使滚动更加平滑 */
.scroll-wrapper::-webkit-scrollbar {
  height: 6px;
}

.scroll-wrapper::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background-color: rgba(0,0.5);
}

上面的代码中，我们先定义了一个包裹滚动图片的父容器 .scroll-wrapper，设置宽度为100%，高度为200px，并设置横向滚动 overflow-x:scroll;，防止图片溢出容器。同时，我们设置了 white-space:Nowrap，使滚动区域横向延伸。

接下来，我们对滚动图片的子容器 .scroll-item 进行了设置，设置为inline-block，使其在一行内排列，并设置高度为父容器高度，同时设置右边距20px，留出相邻图片之间的间隔。

最后，我们对滚动条进行了可选的设置，使其更加平滑。

在HTML中，我们只需要在 .scroll-wrapper 容器中添加多个横向排列的图片即可。

<div class="scroll-wrapper">
  <div class="scroll-item">
    <img src="img1.jpg" alt="图片1">
  </div>
  <div class="scroll-item">
    <img src="img2.jpg" alt="图片2">
  </div>
  <div class="scroll-item">
    <img src="img3.jpg" alt="图片3">
  </div>
  ...
</div>

这样，我们就可以实现横向无限滚动的图片了。