jQuery滑行向上並在底部添加另一個

Question

我有一個由十行組成的HTML表。從這十行我需要一次只顯示5個。經過一段時間後，最上面的一行應該消失，底部應添加一行新的行（行號6）。 在乞討時，表應該由1-2-3-4-5行和2-3-4-5-6過渡後組成。這個過程應該在相同的時間後重復，以產生3-4-5-6-7表。在所有行都被循環後，過程應該從1-2-3-4-5表開始。 所有這一切都應該發生在一個很好的過渡效果。

你能幫我嗎？

Answer 1

使用jquery中的setinterval函數重複該操作。

使用CSS最初顯示前5點表中的行

table tr { 
    display: none; 
} 
table tr:nth-child(-n+5){ 
    display:block; 
} 

$(function(){ 
 
    var i = 0; 
 
    setInterval(function() { 
 
     var sel = 'table tbody tr:nth-child(' + i + ')'; 
 
     $(sel).css("display", "none"); 
 
     var last = i + 5; 
 
     if(last > 10) last = last % 10; 
 
     var sel1 = 'table tbody tr:nth-child(' + last+ ')'; 
 
     $(sel1).css("display", "block"); 
 
     i++; 
 
     if(i == 11) 
 
     i = 1; 
 
    },2000); 
 
})

table tr { 
 
    display: none; 
 
} 
 
table tr:nth-child(-n+5){ 
 
    display:block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="table-responsive"> 
 
    <table class="table"> 
 
    <thead> 
 
     <tr> 
 
     <th>#</th> 
 
     
 
     </tr> 
 
    </thead> 
 
    <tbody class="table-body"> 
 
     <tr> 
 
     <td>1</td> 
 
     </tr> 
 
     <tr> 
 
     <td>2</td> 
 
     </tr> 
 
     <tr> 
 
     <td>3</td> 
 
     </tr> 
 
     <tr> 
 
     <td>4</td> 
 
     </tr> 
 
     <tr> 
 
     <td>5</td> 
 
     </tr> 
 
     <tr> 
 
     <td>6</td> 
 
     </tr><tr> 
 
     <td>7</td> 
 
     </tr><tr> 
 
     <td>8</td> 
 
     </tr><tr> 
 
     <td>9</td> 
 
     </tr><tr> 
 
     <td>10</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
    </div>