走马灯无限循环列表
思路：
首先需求是最多展示6个列表，超过六个列表，数据列表需要循环滚动。然后数据是在ajax中从数据库中获取的
先把所有列表用一个容器（div）装起来，给容器设置固定高度，再设置css属性超出隐藏overflow：hidden和相对定位。
然后再设置个接收数据子容器，设置绝对定位，这样子容器的高度是有内容撑起来的。
获取子容器高度再转换为数字number类型、再判断子容器高度是否大于父容器高度、如果为true，说明需要跑走马灯
再函数中把子容器高度赋值给top，然后再定时器里写top--；在定时器里把top的值赋值给子容器的top属性
接下来清除定时器，判断父容器的高度是否与子容器相等，如果为true清楚定时器，并且把top的值赋值为0初始化
子容器的css属性top也赋值为0初始化、再调用函数本身
html代码:
.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 += `` + ele.trackName + `
` + ele.sellerName + `
// 滚动 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() 效果图