走马灯无限循环列表

思路：

　　首先需求是最多展示6个列表，超过六个列表，数据列表需要循环滚动。然后数据是在ajax中从数据库中获取的

　　先把所有列表用一个容器（div）装起来，给容器设置固定高度，再设置css属性超出隐藏overflow：hidden和相对定位。

　　然后再设置个接收数据子容器，设置绝对定位，这样子容器的高度是有内容撑起来的。

　　获取子容器高度再转换为数字number类型、再判断子容器高度是否大于父容器高度、如果为true，说明需要跑走马灯

　　再函数中把子容器高度赋值给top，然后再定时器里写top--；在定时器里把top的值赋值给子容器的top属性

　　接下来清除定时器，判断父容器的高度是否与子容器相等，如果为true清楚定时器，并且把top的值赋值为0初始化

　　子容器的css属性top也赋值为0初始化、再调用函数本身

　　

html代码:

<!-- 走马灯 -->
    <div class="tableList">
      <div class="tableTitle">昨日新上架应用</div>
      <div class="tableContent">
        <div class="tableTitName">
          <div class="titleImg">应用</div>
          <div class="titleImg">当前状态</div>
          <div class="titleImg">价格</div>
          <div class="titleImg">分类</div>
          <div class="titleImg">上架时间</div>
        </div>
        <div class="tableContBox">
          <div class="tableCont" id="tables"></div>
        </div>
      </div>
    </div>
 
css代码：
/* 走马灯 */
.tableList {
  width: 1170px;
  margin: 0 auto;
}

.tableTitle {
  color: #49A69E;
  text-align: center;
  line-height: 38px;
  font-size: 38px;
  margin: 100px auto;
}

.tableContent {
  border: 1px solid #c1c1c1;
}

.tableTitName {
  display: flex;
  background: #F2F9F9;
}

.tableTitName>div {
  width: 20%;
  text-align: center;
  padding: 10px 0;
  font-size: 18px;
  color: #333;
  font-weight: 500;
}

.tableContBox {
  width: 100%;
  height: 426px;
  overflow: hidden;
  position: relative;
}

.tableCont {
  width: 100%;
  position: relative;
}

.tableCont .cableer_list {
  display: flex;
  width: 100%;
}

.tableCont .cableer_list>div {
  width: 20%;
  text-align: center;
  padding: 10px 0;
  border-top: 1px solid #c1c1c1;
  font-size: 16px;
  color: #333;
}

.tableCont .cableer_list .texts {
  line-height: 50px;
}

.tableCont .cableer_list .tableImg {
  text-align: left;
  display: flex;
}

.tableImg .imgBox {
  margin: 0 20px;
}

.tableImg .imgBox img {
  width: 50px;
}

.tableImg .textBox h4 {
  width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tableImg .textBox p {
  width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

js代码：

　　 function tables() {

      　　var tableDate
      　　$.ajax({
        　　url: apidomain+'v2/info/putaway',
        　　type: 'get',
        　　dataType: 'json',
        　　headers: {
          　　'X-Requested-With': 'XMLHttpRequest'
        　　}，
       　　 success: function (res) {
          　　tableDate = res.data.data;
          　　var str = ''
          　　tableDate.forEach(ele => {
            　　str += 
　　　　　　`<div class="cableer_list">
              　　　　<div class="tableImg">
                　　　　<div class = imgBox><img src="` + ele.artworkUrl60 + `" alt=""></div>
                　　　　<div class = textBox>
                  　　　　<h4>` + ele.trackName + `</h4>
                  　　　　<p>` + ele.sellerName + `</p>
                　　　　</div>
             　　　　</div>
             　　　　<div class ="texts stetaa">在线</div>
             　　　　<div class ="texts price">` + ele.price + `</div>
             　　　　<div class ="texts classify">` + ele.genre + `</div>
             　　　　<div class ="texts dataIssued">` + ele.releaseDate + `</div>
             　　</div>`
         　　 });
          　　$('#tables').html(str)

          // 滚动
          let h = $('#tables').height();
          let tableH = parseInt(h)
          let top = parseInt($('#tables').css('top'));

          function swipers() {
            let cj = 426 - tableH;
            let time = setInterval(function () {
              top--;
              $('#tables').css('top', top + "px");
              if (cj === top) {
                console.log('完');
                clearInterval(time);
                top = 0;
                $('#tables').css('top', '0');
                swipers();
              }
            }, 50)
          }
          if (tableH > 426) {
            swipers();
          }
        },
        error: function (err) {
          console.log(err)
        }
      });
    }
    tables()
 
效果图

 

 

posted @ 2020-06-10 14:23  Mr-Qin  阅读(623)  评论(0)  编辑  收藏  举报