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)
})