思路：
首先需求是最多展示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()
效果图
