下一个/上一个按钮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