jquery无间断循环滚动

在网页设计中，我们经常会遇到需要实现无限循环滚动的需求，例如新闻列表、公告栏等，这种效果可以吸引用户的注意力，让他们不断地向下滚动查看内容，在JavaScript库中，jQuery是一个非常流行的工具，它可以帮助我们轻松地实现这种效果，本文将介绍如何使用jQuery实现无间断循环滚动。

我们需要引入jQuery库，在HTML文件中添加以下代码：

Markup

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

接下来，我们需要编写CSS样式来设置滚动区域的高度和溢出隐藏，在HTML文件中添加以下代码：

Markup

<style>
  .scroll-container {
    height: 200px;
    overflow: hidden;
    position: relative;
  }
</style>

在HTML文件中添加一个包含滚动内容的容器，并为其添加一个类名scroll-container：

Markup

<div class="scroll-container">
  <div class="scroll-content">
    <!-- 在这里添加需要滚动的内容 -->
  </div>
</div>

接下来，我们需要编写JavaScript代码来实现无间断循环滚动，在HTML文件中添加以下代码：

Markup

<script>
  $(function() {
    var scrollContent = $(".scroll-content"); // 获取滚动内容容器
    var scrollHeight = scrollContent.height(); // 获取滚动内容的高度
    var containerHeight = $(".scroll-container").height(); // 获取滚动区域的高度
    var scrollSpeed = 1; // 设置滚动速度，数值越大滚动速度越快
    // 初始化滚动位置
    scrollContent.css({ top: -scrollHeight });
    // 设置定时器实现无间断循环滚动
    var timer = setInterval(function() {
      if (scrollContent.position().top <= -containerHeight) { // 如果滚动到底部，重新设置滚动位置为顶部
        scrollContent.css({ top: -scrollHeight });
      } else { // 否则，继续向下滚动
        scrollContent.css({ top: scrollContent.position().top + scrollSpeed });
      }
    }, 10); // 设置定时器时间间隔，数值越小滚动越平滑，但性能消耗越大
  });
</script>