下一個/上一個按鈕onClick滾動到下一個和上一個​​的

Question

我還在學習JavaScript並需要一些幫助。我正在製作下一個和上一個按鈕，導致滾動到頁面上的下一個或上一個<td>'s。我正在試圖將這個實現到virb站點的現有結構。 標記看起來是這樣的：

div id="next">next</div><div id="prev">prev</div> 
<table> 
<tr><td>code that includes img</td></tr> 
<tr><td>code that includes img</td></tr> 
<tr><td>code that includes img</td></tr> 
<tr><td>code that includes img</td></tr> 
<tr><td>code that includes img</td></tr> 
</table> 

這是我的工作腳本：

jQuery.easing.def = "easeInOutQuad"; 
    $("#next").click(function(){ 
     //$(this).animate(function(){ 
      $('html, body').animate({ 
       scrollLeft: $("td").next.offset().left 
       }, 600); 
     //}); 

    });​ 

​Here is the jsFiddle我的工作

Answer 1

以下內容會跟蹤您當前要查看的項目。你需要一個類似的thig來減少'prev'例程中的索引。

您可能還需要添加延遲或事件截止點，以便動畫過程中的多次點擊不會將currentIdx的值取爲高於或低於要顯示的項目範圍。

var currentIdx = 0; 
jQuery.easing.def = "easeInOutQuad"; 
     $("#next").click(function(){ 

      //$(this).animate(function(){ 
       $('html, body').animate({ 
        scrollLeft: $("td").eq(currentIdx).offset().left 
        }, 600); 
       currentIdx++;  
      //}); 
     }); 

Answer 2

嘗試：

scrollLeft: $("td").next().offset().left