js 走马灯效果无缝不断实现

QingQingYang6

已于 2022-08-22 14:51:06 修改

阅读量809

点赞数

文章标签： javascript 前端 html jquery

于 2022-08-22 14:45:44 首次发布

本文链接：https://blog.csdn.net/QingQingYang6/article/details/126465498

版权

前言：网上找了半天都说无缝用来了后面一篇空白有一点原因就是因为用在我们项目本身的时候我们自己的高度更别人的不一样所以我们要自己计算然后就自己写了一个这个上下左右都可以如果要向右就修改js中的 margin-top=margin-left height=width heigt这个我是获取元素的高度不是写死的如果你的单位是rem 这里就要把高度写死

我做的时候还有做了定时刷新分页不过删掉了这里就做了滚动如果有需求可以问我

没录制动的效果可以复制自己预览

我们现在来看看代码截图

1.html代码 这里最开始写的时候就随便写了几个标签都有问题后面看了别人的大概都用了三个盒子才能运行就是为了后面不留空

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>走马灯</title>
  <style>
    #boxID{width:500px;height:300px;margin:0 auto;overflow:hidden;background:black;box-sizing:border-box;padding:0 10px;}
    .list-box .list{width:100%;display:flex;padding:0 10px;align-items:center;height:75px;box-sizing:border-box;border-bottom:1px solid #ccc;}
    .list-box .list span{width:100%;font-size:18px;color:#ddd;flex:1;text-align:center;display:flex;align-items:center;justify-content:center;box-sizing:border-box;}
    .list-box .list:last-child{border-bottom:1px solid red;}
  </style>
</head>

<body>
  
  <div id="boxID">
    <div id="listBoxID">
      <div class="list-box" id='listID'>
      </div>
    </div>
  </div>
  
  <script src="./jQuery3.6.0.js"></script>
  <script src="./yqq.js"></script>

</body>

</html>

2.js代码 我的列表是直接循环渲染上去的方便做很多操作自己也可以不用

// 这里是我们的列表数据
let data = [  {  title: "你好丫", name: '小明' },  {  title: "美好的一天",  name: '小红'  } ];
var scrollTop = null;// 保存scrollTop实列

// 创建一个走马灯类方法
class ScrollTop {
  constructor(options, box, id) {
    this.time;
    this.options = options;
    this.id = id;
    this.obj = $(box);
    this.height = $(box).find(this.id).height();
    this.value = 0;
  }
  statr() {
    // 添加一些数据使头尾相连
    this.obj.find(this.id).clone().appendTo(this.obj);
    this.time = setInterval(() => {
      this.value++;
      if (this.value > this.height) this.value = 0;
      this.obj.find(this.id).first().css("margin-top", -this.value);
    }, this.options);
  }
  anew() {
    this.height = this.obj.find(this.id).height();
  }
}

!(function () {
  listitembox();
})();

// 数据渲染页面
function listitembox(params) {
  var str1 = "";
  for (var i = 0; i < data.length; i++) {
    str1 += `
         <div class="list">
            <span>${i + 1}</span>
            <span>${data[i].title}</span>
            <span>${data[i].name}</span>
         </div>
     `;
  }
  $("#listID").html(str1);
  ifHeight(data.length, 2);
  // 调用类(移动速度，主元素id，子元素id)
  scrollTop = new ScrollTop(15, "#boxID", "#listBoxID");
  scrollTop.statr();
}

// 这里做判断是为了不然数据只有几条的时候 滚动到最后面出现空白
// 根据数据长度判断设置高度 这里我们是看主盒子的高度来定义每条数据有多高
// 比如主盒子高度是300 数据只有2两条 我们就用300/2得到每条数据的高度 
function ifHeight(dataLength) {
  let heigt = $("#boxID").height() // 获取主盒子的高度
  let h = heigt / dataLength
  if (dataLength <= 4) {// 这里判断我是每次出现小于4条的时候 高度才会平均分
    $("#listID .list").attr("style", "height:" + h + "px");
  }
}

犯困犯困