javascript - 下一个/上一个按钮 onClick 滚动到下一个和上一个

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

    });​

这是我正在研究的 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++;     
            //});
        });