css怎么做图片组滚动

CSS怎么做图片组滚动？简单来说， CSS 通过控制 div 的样式以及背景图片滚动实现图片组的滚动展示。

  /* 定义图片组所在的 div 标签的样式 */  .scroll-wrapper {
        width: 100%;
        height: 400px;
        overflow: hidden;
        position: relative;
  }
    /* 定义图片的容器 div */  .scroll-container {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
  }
    /* 定义图片的样式 */  .scroll-container img {
        width: 100%;
        height: 100%;
        float: left;
  }
    

上面的代码定义了图片组的样式，下面我们通过添加背景图片来使其滚动。

  /* 每个图片的宽度，可以根据实际情况更改 */  var imgWidth = 600;
        // 获取图片数量  var imgCount = document.querySelectorAll(".scroll-container img").length;
        // 计算图片总宽度  var totalWidth = imgWidth * imgCount;
        // 设置容器宽度为图片总宽度  document.querySelector(".scroll-container").style.width = totalWidth + "px";
        var speed = 1;
    // 滚动函数  function scroll(){
        var container = document.querySelector(".scroll-container");
        var currentX = container.offsetLeft;
        var newX = currentX - speed;
        if (newX = -totalWidth) {
          newX = 0;
    }
            container.style.left = newX + "px";
        requestAnimationFrame(scroll);
  }
        scroll();
      

上面的代码通过 JavaScript 实现图片组的滚动效果。

在 HTML 中，我们需要在 .scroll-wrapper 的 div 中添加一个 .scroll-container 的 div，宽度为所有图片宽度之和，然后将每个图片都放在 .scroll-container 容器中。最后通过 JavaScript 控制 .scroll-container 容器向左滚动，就可以实现图片组的滚动效果了。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！