利用jQuery制作简易的table上下无缝轮播-Toy模板网

这篇具有很好参考价值的文章主要介绍了利用jQuery制作简易的table上下无缝轮播。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <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 {
            z-index: 0;
        }
    </style>
</head>

<body>
    <div class="box">
        <table class="table" border=1 cellspacing=0>
            <thead class="thead">
                <tr>
                    <th>序号</th>
                    <th>名字</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>测试1</th>
                </tr>
            </thead>
            <tbody class="tbody">

            </tbody>
        </table>
    </div>
    <script>

        // 加载数据
        for (let i = 0; i < 20; i++) {
            var row = [
                '<tr>',
                '<td title="' + i + 1 + '">' + i + 1 + '</td>',
                '<td>' + '名字' + i + '</td>',
                '<td>' + '年龄' + i + '</td>',
                '<td>' + '性别' + i + '</td>',
                '<td>' + '测试1--' + i + '</td>',
                '</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(0, top.indexOf('px'))
            startFun(time)
            function 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('top');      // 获取tbody的top值
                    let tbodyTop = tbodyTopPX.substring(0, tbodyTopPX.indexOf('px'))
                    
                    body_tbody.css({ 'top': offsetTop + 'px' })     //改变tbody的top    令tbody向上移动
                    
                    if (tbodyTop != 0 && parseInt(tbodyTop) % Math.ceil(scrollHeight) === 0) {         //  tbodyTop的top值是 tr高度的倍数时    将第一个tr移动到最后并让tbodyTop的top值减去tr的高度
                        body_tbody.find("tr:first").appendTo(body_tbody);
                        offsetTop += scrollHeight
                        body_tbody.css({ 'top': offsetTop + 'px' })
                    }

                }, time)
            }
            $(".box").mouseover(function () {
                // 鼠标移入  关闭轮播
                clearTimeout(timer)
            });
            $(".box").mouseout(function () {
                // 鼠标移出  重新开启轮播
                startFun(time)
            });
        }

        function heightComparison() {
            let divHeight = $(".box").height();    //最外层div的高度  用来比较数据的长度是否超过div的高度，没超过不开始轮播
            let tbodyHeight = $(".tbody").height();
            let tHeadHeight = $(".thead").height();
            return tbodyHeight > divHeight - tHeadHeight
        }

    </script>
</body>

</html>