0

私はまだ 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です

4

2 に答える 2

1

試す：

    scrollLeft: $("td").next().offset().left
于 2012-11-05T17:06:31.943 に答える
0

以下は、表示する現在のアイテムを追跡します。'prev'ルーチンのインデックスをデクリメントするには、同様のthigが必要です。

また、アニメーション中に複数回クリックしても、表示する必要のあるアイテムの範囲より上または下の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++;     
            //});
        });
于 2012-11-06T08:39:59.107 に答える