列表无缝滚动例子

最新推荐文章于 2022-11-12 00:09:30 发布

请用眼神交流

最新推荐文章于 2022-11-12 00:09:30 发布

阅读量288

点赞数

分类专栏： JS实用方法文章标签： JS CSS

本文链接：https://blog.csdn.net/weixin_43977847/article/details/103481929

版权

JS实用方法专栏收录该内容

2 篇文章 0 订阅

订阅专栏

需求

有一行列表，每页展示五条，五秒后，列表滚动，展示6-10条数据，无缝滚动。

完整实例代码


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      position: relative;
      /* 外层的高度应该是每条数据的高度之和 */
      height: 200px;
      overflow: hidden;
    }

    #list {
      width: 100%;
      background: red;
      position: relative;
      transition: top 2s;
      -webkit-transition: top 2s;
      /* 一定要加，否则第一次滚动动画不会触发 */
      top: 0;
    }

    li {
      list-style: none;
      text-align: center;
      height: 40px;
      line-height: 40px;
      box-sizing: border-box;
      border-bottom: 1px solid blue;
    }
  </style>
</head>

<body>
  <div>
    <ul id="list">
    </ul>
  </div>
</body>
</html>
<script src="./jquery.min.js"></script>

<script>
  // 模拟数据
  let liHtml = "";
  for (let i = 0; i < 25; i++) {
    liHtml += `
      <li>${i + 1}</li>
    `;
  }
  $("#list").append(liHtml);

  //  实现逻辑
  let _timer, _activeIndex = 0;

  // 设置定时器， 每五秒滚动一次
  if (!_timer) {
    _timer = setInterval(_ => {
      // 25条数据，5条一页
      if (_activeIndex < 25 / 5 - 1) {
        _activeIndex += 1;
        setScrollAnimate(_activeIndex, true);
      } else {
        // 当数据循环结束后，重头开始，
        // 此时，transition如存在，则会有从下往上滚动的效果，视觉效果不好
        _activeIndex = 0;
        setScrollAnimate(_activeIndex, false);
      }
    }, 5000);
  }


  function setScrollAnimate(activeIndex, isTransition) {
    $("#list").css({
      top: -activeIndex * 40 * 5 + "px",
      transition: isTransition ? "top 0.5s" : "none"
    });
  }

</script>

请用眼神交流

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
列表无缝滚动例子

需求有一行列表，每页展示五条，五秒后，列表滚动，展示6-10条数据，无缝滚动。完整实例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi...
复制链接

扫一扫