<!DOCTYPE html> <html lang="en"> head> meta charset="UTF-8"http-equiv="x-ua-compatible" content="IE=edge"name="viewport"="width=device-width,initial-scale=1.0"title>Document</script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> style> .box { /* 最外层可显示的高度 */ height: 200px; overflow hidden; } .table { width 600px .thead,.tbody position relative .thead z-index 1 background darkgray .tbody 0} bodydiv class="box"> table ="table" border=1 cellspacing=0> thead ="thead"> tr> th>序号>名字>年龄>性别>测试1theadtbody ="tbody"> tbodytablediv> // 加载数据 for (let i = 0; i < 20; i++) { var row = [ '<tr>,<td title="' + i + 1 "></td><td>名字年龄性别测试1--</tr> ].join('') console.log(row) $(.box tbody).append(row) } startRoll(50) 50为时间 function startRoll(time) { let timer null 默认初始值为自己本身的top let top $(".tbody).css(top) let offsetTop top.substring(px)) startFun(time) startFun(time) { timer setInterval(() => { 比较数据的长度是否超过div的高度，没超过不开始轮播 if (!heightComparison()) { clearTimeout(timer) return false } offsetTop -= 1 let body_tbody tbody) 定义 tbody为body_tbody let scrollHeight body_tbody.find(tr).outerHeight(true); 获取 tr的高度 let tbodyTopPX body_tbody.css(); 获取tbody的top值 let tbodyTop tbodyTopPX.substring()) body_tbody.css({ : offsetTop }) 改变tbody的top 令tbody向上移动 (tbodyTop != 0 && parseInt(tbodyTop) % Math.ceil(scrollHeight) === ) { tbodyTop的top值是 tr高度的倍数时 将第一个tr移动到最后并让tbodyTop的top值减去tr的高度 body_tbody.find(tr:first).appendTo(body_tbody); offsetTop += scrollHeight body_tbody.css({ }) } },time) } $(.box).mouseover( () { 鼠标移入 关闭轮播 clearTimeout(timer) }); $().mouseout( 鼠标移出 重新开启轮播 startFun(time) }); } heightComparison() { let divHeight ).height(); 最外层div的高度 用来比较数据的长度是否超过div的高度，没超过不开始轮播 let tbodyHeight ).height(); let tHeadHeight .thead).height(); return tbodyHeight divHeight - tHeadHeight } html>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件举报，一经查实，本站将立刻删除。
