上一个/上一个按钮的下一个点击滚动到下一个和上一个 [英] Next/Prev buttons onClick scroll to next and previous <td>'s

问题描述

我仍在学习JavaScript，需要一些帮助.我正在制作下一个和上一个按钮，这些按钮会导致滚动到页面上的下一个或上一个<td>.我正在尝试将其实现为virb网站的现有结构. 标记看起来像这样:

I'm still learning JavaScript and need some help. I am making next and previous buttons that cause a scroll to the next or previous <td>'s on the page. I'm trying to implement this to the existing structure of a virb site. the markup looks like this:

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>

这是我正在使用的脚本:

Here is the script I'm working with:

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

    });​

这是我正在研究的jsFiddle

推荐答案

以下内容跟踪您当前要查看的项目.您将需要一个类似的thig来减少上一个"例程中的索引.

The following keeps track of your current item to view. You'll need a similar thig to decrement the index in your 'prev' routine.

您可能还需要添加延迟或事件截止时间，以使动画过程中的多次单击不会使currentIdx的值高于或低于您要显示的项目范围.

You may also need to add a delay or an event cut-off so that multiple clicks during animation don't take the value of currentIdx above or below the range of items you have to show.

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

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

这篇关于上一个/上一个按钮的下一个点击滚动到下一个和上一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！