基于jQuery实现列表循环滚动小技巧(超简单)

下面是“基于jQuery实现列表循环滚动小技巧(超简单)”的完整攻略。

1. 实现思路

本示例通过创建一个列表容器，实现循环滚动的效果，具体步骤如下：

创建一个列表容器，设置固定的宽度和高度；
将所有列表项（如<li>）添加到容器中，并通过样式设置它们的排列方式（如float）；
使用setInterval()函数，每隔一定时间移动容器的位置（通过调整左边距实现）；
监听容器的transitionend事件，当容器移动到最后一个列表项时，将容器重新移动到起始位置。

2. 实现代码

HTML代码：

<div class="list-container">
  <ul class="list">
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
    <li>列表项5</li>
    <li>列表项6</li>
  </ul>
</div>

CSS代码：

.list-container {
  width: 400px;
  height: 200px;
  overflow: hidden;
}

.list {
  margin: 0;
  padding: 0;
  width: 9999px; /* 确保放得下所有列表项 */
  transition: left 0.5s ease-out;
}

.list li {
  float: left;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  background-color: #ccc;
  margin-right: 20px;
  border-radius: 50%;
}

JavaScript代码：

$(document).ready(function() {
  var container = $(".list-container");
  var list = $(".list");
  var interval = 2000; // 每次移动的时间间隔，单位为毫秒
  var leftMargin = 0; // 初始左边距为0
  var itemWidth = list.find("li").outerWidth(true); // 每个列表项的宽度

  // 设置容器的宽度和列表项的位置
  list.width(itemWidth * list.find("li").length);

  // 每隔一段时间移动容器的位置
  setInterval(function() {
    leftMargin -= itemWidth;
    list.css("left", leftMargin + "px");
  }, interval);

  // 监听容器的transitionend事件，当容器移动到最后一个列表项时，将容器重新移动到起始位置
  container.on("transitionend", function() {
    if (leftMargin <= -itemWidth * list.find("li").length) {
      leftMargin = 0;
      list.css("left", leftMargin + "px");
    }
  });
});

3. 示例说明

示例一

下面是一个基础示例，实现了列表滚动的效果，每个列表项之间间隔20px，每隔2秒钟移动一次：

<!DOCTYPE html>
<html>
<head>
  <title>列表循环滚动小技巧</title>
  <style>
    .list-container {
      width: 400px;
      height: 200px;
      overflow: hidden;
    }

    .list {
      margin: 0;
      padding: 0;
      width: 9999px; /* 确保放得下所有列表项 */
      transition: left 0.5s ease-out;
    }

    .list li {
      float: left;
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
      background-color: #ccc;
      margin-right: 20px;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <div class="list-container">
    <ul class="list">
      <li>列表项1</li>
      <li>列表项2</li>
      <li>列表项3</li>
      <li>列表项4</li>
      <li>列表项5</li>
      <li>列表项6</li>
    </ul>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
  <script>
    $(document).ready(function() {
      var container = $(".list-container");
      var list = $(".list");
      var interval = 2000; // 每次移动的时间间隔，单位为毫秒
      var leftMargin = 0; // 初始左边距为0
      var itemWidth = list.find("li").outerWidth(true); // 每个列表项的宽度

      // 设置容器的宽度和列表项的位置
      list.width(itemWidth * list.find("li").length);

      // 每隔一段时间移动容器的位置
      setInterval(function() {
        leftMargin -= itemWidth;
        list.css("left", leftMargin + "px");
      }, interval);

      // 监听容器的transitionend事件，当容器移动到最后一个列表项时，将容器重新移动到起始位置
      container.on("transitionend", function() {
        if (leftMargin <= -itemWidth * list.find("li").length) {
          leftMargin = 0;
          list.css("left", leftMargin + "px");
        }
      });
    });
  </script>
</body>
</html>

示例二

下面是一个稍微复杂一些的示例，实现了在列表项被点击时停止滚动，并在2秒钟后重新开始。

<!DOCTYPE html>
<html>
<head>
  <title>列表循环滚动小技巧</title>
  <style>
    .list-container {
      width: 400px;
      height: 200px;
      overflow: hidden;
    }

    .list {
      margin: 0;
      padding: 0;
      width: 9999px; /* 确保放得下所有列表项 */
      transition: left 0.5s ease-out;
    }

    .list li {
      float: left;
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
      background-color: #ccc;
      margin-right: 20px;
      border-radius: 50%;
      cursor: pointer;
    }

    .list li:hover {
      background-color: #aaa;
    }
  </style>
</head>
<body>
  <div class="list-container">
    <ul class="list">
      <li>列表项1</li>
      <li>列表项2</li>
      <li>列表项3</li>
      <li>列表项4</li>
      <li>列表项5</li>
      <li>列表项6</li>
    </ul>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
  <script>
    $(document).ready(function() {
      var container = $(".list-container");
      var list = $(".list");
      var interval = 2000; // 每次移动的时间间隔，单位为毫秒
      var leftMargin = 0; // 初始左边距为0
      var itemWidth = list.find("li").outerWidth(true); // 每个列表项的宽度
      var timerId; // 用于存储setInterval返回的timer ID

      // 设置容器的宽度和列表项的位置
      list.width(itemWidth * list.find("li").length);

      // 每隔一段时间移动容器的位置
      timerId = setInterval(function() {
        leftMargin -= itemWidth;
        list.css("left", leftMargin + "px");
      }, interval);

      // 监听容器的transitionend事件，当容器移动到最后一个列表项时，将容器重新移动到起始位置
      container.on("transitionend", function() {
        if (leftMargin <= -itemWidth * list.find("li").length) {
          leftMargin = 0;
          list.css("left", leftMargin + "px");
        }
      });

      // 当列表项被点击时停止滚动，并在2秒钟后重新开始
      list.on("click", "li", function() {
        clearInterval(timerId);
        setTimeout(function() {
          timerId = setInterval(function() {
            leftMargin -= itemWidth;
            list.css("left", leftMargin + "px");
          }, interval);
        }, 2000);
      });
    });
  </script>
</body>
</html>

在这个示例中，我们给列表项添加了cursor:pointer样式，使得当鼠标悬浮在列表项上时变成手型，更容易引导用户去点击。当点击列表项时，我们调用clearInterval()函数停止滚动，然后使用setTimeout()函数在2秒钟后重新调用setInterval()函数开始滚动。为了方便，我们将setInterval()返回的timer ID存储到变量timerId中，以便在需要停止滚动时调用clearInterval()函数。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于jQuery实现列表循环滚动小技巧(超简单) - Python技术站

基于jQuery实现列表循环滚动小技巧(超简单)

1. 实现思路

2. 实现代码

3. 示例说明

示例一

示例二

相关文章