下一个/上一个按钮 onClick 滚动到下一个和上一个 <td> 的

Question

我仍在学习 JavaScript，需要一些帮助。我正在制作下一个和上一个按钮，这些按钮会导致滚动到页面上的下一个或上一个<td>。我正在尝试将其应用于 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

试试：

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

Answer 2

以下内容会跟踪您当前要查看的项目。您需要类似的方法来减少“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++;     
            //});
        });