js+jquery原生实现轮播表

html代码

 <table class="tab-scroll" >
                     <thead>
                     <tr>
                         <th>1</th>
                         <th>2</th>
                         <th>3</th>
                         <th>4</th>
                     </tr>
                     </thead>
                        <tbody id="rankdetail2">
                        <tr>
                            <td>11</td>
                            <td >12</td>
                            <td >13</td>
                            <td>14</td>
                        </tr>
                         <tr>
                            <td>11</td>
                            <td >12</td>
                            <td >13</td>
                            <td>14</td>
                        </tr>
                         <tr>
                            <td>11</td>
                            <td >12</td>
                            <td >13</td>
                            <td>14</td>
                        </tr>
                         <tr>
                            <td>11</td>
                            <td >12</td>
                            <td >13</td>
                            <td>14</td>
                        </tr>
                        </tbody>
                    </table>

样式自己写，与功能无关

就是代码

var runTimerFn=true//控制轮播状态
var timer= null//控制定时器，否则好多定时器会打架
function timerFn() {
            var scrollHeight = $('#rankdetail2').find("tr").outerHeight();//id是需要滚动的元素，我这里是tbody
            $('#rankdetail2').animate({//id是需要滚动的元素，我这里是tbody
                    marginTop: -scrollHeight,
                }, 1000,
                function () {
                    $(this).css({marginTop: "0px",}).find("tr:first").appendTo(this);
                });
        },
function initTable() {
            if(runTimerFn){
                if (timer) {
                    clearInterval(timer)
                } else {
                    timer = setInterval(() => {
                        timerFn()
                    }, 1500)
                }
            }
        },     
        
    $("#rankdetail2").mouseenter(() => {//鼠标移入停止滚动，id是需要滚动的元素，我这里是tbody
        runTimerFn = false
        $("#rankdetail2").css("cursor", "pointer")
        clearInterval(timer)
    })
    $("#rankdetail2").mouseleave(() => {//鼠标移出开始滚动，id是需要滚动的元素，我这里是tbody
                timer = setInterval(() => {
                    timerFn()
                }, 1500)
    })           

欢迎批评，提问！ 点关注不迷路哦！