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

以下内容会跟踪您要查看的当前项目。你需要一个类似的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++;     
            //});
        });

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

2 个答案: