js实现图片无缝滚动特效

下面是“js实现图片无缝滚动特效”的完整攻略：

简介

无缝滚动特效是网页设计中常用的效果之一，可以使页面更加生动和丰富。JS实现图片无缝滚动特效需要以下几个步骤：

HTML布局；
CSS样式；
JS编写。

HTML布局

在HTML中，需要先设置好图片的容器和展示区域。

<div class="scroll-container">
  <div class="scroll-content">
    <ul>
      <li><img src="img1.jpg" alt=""></li>
      <li><img src="img2.jpg" alt=""></li>
      <li><img src="img3.jpg" alt=""></li>
      <li><img src="img4.jpg" alt=""></li>
      <li><img src="img5.jpg" alt=""></li>
      <!-- 图片数量可以根据需求进行更改 -->
    </ul>
  </div>
</div>

CSS样式

为了实现无缝滚动，需要设置一些CSS样式，其中主要包括以下几点：

设置容器的宽度和高度；
设置容器的 overflow 为 hidden，使得图片溢出部分被隐藏；
对 ul 设置宽度为图片张数乘以单张图片宽度，使得 ul 的宽度能够容纳所有图片；
对 ul 以及其 li 设置 display 为 inline-block，使得 ul 中的 li 并排显示；
对 ul 以及其 li 设置 padding 为 0 和 margin 为 0，取消默认样式；
对 li 中的 img 设置宽度和高度等于单张图片的宽高；
对 li 中的 img 设置 float 为 left，使得图片水平排列。

下面是样式代码：

.scroll-container {
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.scroll-content {
  width: 5000px;
}

.scroll-content ul {
  width: 2500px;
  display: flex;
  margin: 0;
  padding: 0;
}

.scroll-content ul li {
  display: inline-block;
  padding: 0;
  margin: 0;
}

.scroll-content ul li img {
  width: 500px;
  height: 300px;
  float: left;
}

JS编写

实现无缝滚动效果需要用到 JS 中的 setInterval 方法和 clearInterval 方法。步骤如下：

获取图片容器（ul）元素本身以及其中所有 li 元素；
利用 setInterval 方法每隔一定时间调用一次滚动函数；
滚动函数实现以下逻辑：
判断当前是否滚动到最后一张图片，如果是则立即将 ul 的 left 设为 0，重新开始一轮滚动；
否则在当前基础上继续滑动，直到下一张图片的位置；
利用 clearInterval 方法停止滚动。

下面是代码示例：

var timer = null;
var scrollElem = document.querySelector(".scroll-content ul");
var scrollImg = document.querySelectorAll(".scroll-content ul li");

function start() {
  slideTimer = setInterval(function () {
    intervalSlide();
  }, 2000);
}

function intervalSlide() {
  var bannerWidth = parseInt(getComputedStyle(scrollElem).width);

  if (scrollElem.offsetLeft <= -(scrollImg.length - 1) * bannerWidth) {
    scrollElem.style.left = "0px";
  } else {
    var newLeft = scrollElem.offsetLeft - bannerWidth;
    scrollElem.style.left = newLeft + "px";
  }
}

function stop() {
  clearInterval(slideTimer);
}

start();

示例

下面是两个完整的示例，可以参考：

示例一

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>JS实现无缝滚动特效</title>
  <style>
    .scroll-container {
      overflow: hidden;
      position: relative;
      width: 100%;
      height: 400px;
    }
    .scroll-content ul {
      list-style: none;
      position: absolute;
      left: 0;
      top: 0;
    }
    .scroll-content ul li {
      float: left;
      width: 1000px;
    }
    .scroll-content ul li img {
      width: 100%;
    }
  </style>
</head>
<body>
  <div class="scroll-container">
    <div class="scroll-content">
      <ul>
        <li><img src="./images/1.jpg" alt=""></li>
        <li><img src="./images/2.jpg" alt=""></li>
        <li><img src="./images/3.jpg" alt=""></li>
        <li><img src="./images/4.jpg" alt=""></li>
        <li><img src="./images/5.jpg" alt=""></li>
      </ul>
    </div>
  </div>
  <script>
    var timer = null;
    var scrollElem = document.querySelector(".scroll-content ul");
    var scrollImg = document.querySelectorAll(".scroll-content ul li");

    function start() {
      slideTimer = setInterval(function () {
        intervalSlide();
      }, 2000);
    }

    function intervalSlide() {
      var bannerWidth = parseInt(getComputedStyle(scrollElem).width);

      if (scrollElem.offsetLeft <= -(scrollImg.length - 1) * bannerWidth) {
        scrollElem.style.left = "0px";
      } else {
        var newLeft = scrollElem.offsetLeft - bannerWidth;
        scrollElem.style.left = newLeft + "px";
      }
    }

    function stop() {
      clearInterval(slideTimer);
    }

    start();
  </script>
</body>
</html>

示例二

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>JS实现无缝滚动特效</title>
  <style>
    .scroll-container {
      width: 100%;
      height: 400px;
      overflow: hidden;
    }
    .scroll-content {
      width: 5000px;
    }
    .scroll-content ul {
      width: 2500px;
      display: flex;
      margin: 0;
      padding: 0;
    }
    .scroll-content ul li {
      display: inline-block;
      padding: 0;
      margin: 0;
    }
    .scroll-content ul li img {
      width: 1000px;
      height: 400px;
      float: left;
    }
  </style>
</head>
<body>
  <div class="scroll-container">
    <div class="scroll-content">
      <ul>
        <li><img src="./images/1.jpg" alt=""></li>
        <li><img src="./images/2.jpg" alt=""></li>
        <li><img src="./images/3.jpg" alt=""></li>
        <li><img src="./images/4.jpg" alt=""></li>
        <li><img src="./images/5.jpg" alt=""></li>
      </ul>
    </div>
  </div>
  <script>
    var timer = null;
    var scrollElem = document.querySelector(".scroll-content ul");
    var scrollImg = document.querySelectorAll(".scroll-content ul li");

    function start() {
      slideTimer = setInterval(function () {
        intervalSlide();
      }, 2000);
    }

    function intervalSlide() {
      var bannerWidth = parseInt(getComputedStyle(scrollElem).width);

      if (scrollElem.offsetLeft <= -(scrollImg.length - 1) * bannerWidth) {
        scrollElem.style.left = "0px";
      } else {
        var newLeft = scrollElem.offsetLeft - bannerWidth;
        scrollElem.style.left = newLeft + "px";
      }
    }

    function stop() {
      clearInterval(slideTimer);
    }

    start();
  </script>
</body>
</html>

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js实现图片无缝滚动特效 - Python技术站

js实现图片无缝滚动特效

简介

HTML布局

CSS样式

JS编写

示例

示例一

示例二

相关文章