走马灯无限循环列表

思路：

　　首先需求是最多展示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 {

   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 {

   20%;

  text-align: center;

  padding: 10px 0;

  font-size: 18px;

  color: #333;

  font-weight: 500;

}

.tableContBox {

   100%;

  height: 426px;

  overflow: hidden;

  position: relative;

}

.tableCont {

   100%;

  position: relative;

}

.tableCont .cableer_list {

  display: flex;

   100%;

}

.tableCont .cableer_list>div {

   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 {

   50px;

}

.tableImg .textBox h4 {

   140px;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}

.tableImg .textBox p {

   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()

 

效果图