css js图片滚动代码

CSS JS图片滚动是一种常见的网页效果，通过它可以展示多张图片，并在页面上进行滚动。下面，我们来介绍一些相关的代码。 首先，我们需要使用CSS定义图片滚动的样式。以下是示例代码：

  /* 定义容器的样式 */
  .container {
    width: 100%;
    overflow: hidden;
  }
  /* 定义图片列表的样式 */
  .slider {
    display: flex;
    width: 150%;
    animation: slide 20s infinite;
  }
  /* 定义动画效果 */
  @keyframes slide {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }

接下来，我们需要使用JS来实现图片滚动的功能。以下是示例代码：

  /* 获取图片列表和容器 */
  var slider = document.querySelector('.slider');
  var container = document.querySelector('.container');
  /* 获取容器的宽度 */
  var containerWidth = container.offsetWidth;
  /* 设置图片的宽度 */
  var sliderWidth = containerWidth * 1.5;
  var sliderItems = document.querySelectorAll('.slider-item');
  for (var i = 0; i < sliderItems.length; i++) {
    sliderItems[i].style.width = containerWidth + 'px';
  }
  slider.style.width = sliderWidth + 'px';

最后，我们需要使用HTML来添加图片列表。以下是示例代码：

   <div class="container">
    <div class="slider">
      <div class="slider-item">
        <img src="img1.jpg" alt="图片1"/>
      </div>
      <div class="slider-item">
        <img src="img2.jpg" alt="图片2"/>
      </div>
      ...
    </div>
  </div>

通过CSS、JS和HTML的配合，我们可以轻松地实现图片滚动的效果。希望这篇文章能对你有所帮助。