这个轮播列表的效果是我参考了这位博主的文章http://t.csdnimg.cn/IMzBz，感谢这位大佬！！！
首先来看一下整体效果，当鼠标放置在轮播列表中滚动停止
video02
值得一提的是，原博主采用了两次
$('.scrollContent').append(str1); $('.scrollContent').append(str1);
我在使用的过程中发现当第二次滚动完成后会迅速跳转到顶上来，我在这里采用了for循环的形式，for循环里面的条件始终为真，相当于不断插入表格（）
for (let j = 0; j < 10; j++) { $('.scrollContent').append(str1); }
这里在第二个div容器中,在每个文字之后加了“000000”，这是为了保证表头与表格中的数据对齐，美观度更好。
<div class="scroll-box"> <table class="scroll-tab" border="0" cellspacing="1" cellpadding="1"> <tbody class="scrollContent"> <th>序号000000</th> <th>品番000000</th> <th>库位000000</th> <th>数量000000</th> <th>部门000000</th> <th>状态000000</th> <th>时间000000</th> </tbody> </table> </div>
整体代码如下，可以直接在VScode中运行(jquery.min.js文件路径是你自己的，否则不会显示轮播列表）：
<!DOCTYPE html> <html lang='en'> <head> <meta charset='utf-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <link rel='stylesheet' href='./styles.css' /> <script src='./webcc.min.js'></script> <!-- mandatory dependency --> <!-- add additional dependencies/third party libraries --> <script src="./control/jquery.min.js"></script> <style> * { margin: 0; padding: 0; } html, body { overflow: hidden; font-family: 'Siemens Sans', Hevletica, 'sans-serif'; margin: 0; height: 100%; } .table { overflow: hidden; width: 100%; height: 100%; position: relative; /* background-color: rgb(48, 97, 81); */ margin: auto; line-height: 60px; text-align: center; } .table tr { position: relative; margin: auto; /* font-size: 25px; */ /* color: rgb(72, 255, 0); */ /* opacity: 0.8; */ } .scroll-box { height: 800px; width: 100%; overflow: hidden; position: relative; text-align: center; transform: translateZ(0); } /* 轮播部分表格相关设置 */ .scroll-tab { height: 60%; width: 100%; position: relative; background-color: rgb(15, 50, 81); } /* 表格中字体相关设置 */ .scroll-tab tr { text-align: center; justify-content: space-around; align-items: center; } .scrollContent { height: 30px; width: 100%; overflow-y: auto; position: relative; background-color: rgb(195, 173, 230); } </style> </head> <body> <div id="table1"> <table border="1" class="table" style="margin: auto;" cellspacing="1" cellpadding="1"> <thead> <tr> <th>序号</th> <th>品番</th> <th>库位</th> <th>数量</th> <th>部门</th> <th>状态</th> <th>时间</th> </tr> </thead> </table> <div class="scroll-box"> <table class="scroll-tab" border="0" cellspacing="1" cellpadding="1"> <tbody class="scrollContent"> <th>序号000000</th> <th>品番000000</th> <th>库位000000</th> <th>数量000000</th> <th>部门000000</th> <th>状态000000</th> <th>时间000000</th> </tbody> </table> </div> </div> <script> var carousel_speed = 15; var str1 = ''; var scrollContent = document.getElementsByClassName('scroll-box').item(0); var table = document.getElementsByClassName('scroll-tab').item(0); var object_table = { //模拟数据 data: [{ id: 1, pinfan: "好", kuwei: 23, shuliang: 4342, bumen: "科技部", zhuangtai: "良好", shijian: "2020-12-43" }, { id: 2, pinfan: "合格", kuwei: 23, shuliang: 4342, bumen: "科技部", zhuangtai: "良好", shijian: "2020-12-43" }, { id: 3, pinfan: "好", kuwei: 23, shuliang: 4342, bumen: "科技部", zhuangtai: "良好", shijian: "2020-12-43" }, { id: 4, pinfan: "一般", kuwei: 23, shuliang: 4342, bumen: "科技部", zhuangtai: "良好", shijian: "2020-12-43" }, { id: 5, pinfan: "好", kuwei: 23, shuliang: 4342, bumen: "科技部", zhuangtai: "良好", shijian: "2020-12-43" }, { id: 6, pinfan: "好", kuwei: 23, shuliang: 4342, bumen: "科技部", zhuangtai: "良好", shijian: "2020-12-43" }, { id: 7, pinfan: "合格", kuwei: 23, shuliang: 4342, bumen: "科技部", zhuangtai: "良好", shijian: "2020-12-43" }, { id: 8, pinfan: "合格", kuwei: 23, shuliang: 4342, bumen: "科技部", zhuangtai: "良好", shijian: "2020-12-43" }, { id: 9, pinfan: "好", kuwei: 23, shuliang: 4342, bumen: "科技部", zhuangtai: "良好", shijian: "2020-12-43" }, { id: 10, pinfan: "好", kuwei: 23, shuliang: 4342, bumen: "科技部", zhuangtai: "良好", shijian: "2020-12-43" } ], carousel_speed: carousel_speed } var data12 = { data: object_table.data } for (let n = 0; n < data12.data.length; n++) { str1 += '<tr class="swiper-slide" style="height: 48px;"><td>' + data12.data[n].id + ' </td><td> ' + data12.data[n].pinfan + ' </td><td> ' + data12.data[n].kuwei + ' </td><td> ' + data12.data[n].shuliang + ' </td><td> ' + data12.data[n].bumen + ' </td><td> ' + data12.data[n].zhuangtai + ' </td><td> ' + data12.data[n].shijian + ' </td></tr> '; } //不能使用innerHtml 理论上相当于无限插入 目的是复制数据 使滚动区域高度大于容器高度 实现滚动效果 for (let j = 0; j < 10; j++) { $('.scrollContent').append(str1); } //滚动函数 function roll(t) { var timer = setInterval(rollStart, t); // 间隔时间t // 鼠标移入table时暂停滚动 table.onmouseover = function () { clearInterval(timer); }; // 鼠标移出table后继续滚动 table.onmouseout = function () { timer = setInterval(rollStart, t); }; } // 开始滚动函数 function rollStart() { // 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0 if (scrollContent.scrollTop >= scrollContent.scrollHeight / 2) { //注此处高度相当于为俩个tbody高度 需除2 scrollContent.scrollTop = 0; } else { scrollContent.scrollTop++; } } $(document).ready(function () { //奇偶行颜色不一致 $(".scrollContent").children("tr:nth-child(even)").css("background-color", "#022459") $(".scrollContent").children("tr:nth-child(odd)").css("background-color", "#01004e") //表头颜色、字体等设置 $(".table").css("background-color", "rgb(48, 97, 81)") $(".table tr").css("font-size", "25px") $(".table tr").css("color", "rgb(72, 243, 13, 0.8)") $(".table tr").css("opacity", "0.8") //表格内字体颜色、大小等设置 $(".scroll-tab tr").css("color", "rgb(13, 203, 203, 0.8)") $(".scroll-tab tr").css("font-size", "24px") }); //执行滚动函数s roll(object_table.carousel_speed); </script> </body> </html>
