0

したがって、各パネルが480x300（ステータスバーの場合は-20px）で、左または右にスクロールするための2つのナビゲーションボタンがあるWebアプリがあります。

これで、表示されている最大パネルを超えてスクロールし続ける場合を除いて、すべてがうまく機能します。

最後のパネルに到達した後、Jquery .animate（）を停止できるかどうか疑問に思いました。

http://jsfiddle.net/gS33Y/

4

5 に答える 5

1

Hiya別のデモ http://jsfiddle.net/qpHSw/ または http://jsfiddle.net/yEsDQ/ または http://jsfiddle.net/yEsDQ/show

このサンプルは、li を ul で動的にカウントし、それに応じてアニメーションを調整します。

コード 

   var cur = 1;
var max = $(".scroll-content ul").children("li").length;

$("nav.back").click(function(){

    if (cur+1 > max) return;
    cur++;

    $("#panel").animate({
        marginLeft: "-=500px",
    }, 1000);

});

$("nav.forward").click(function(){
    if (cur-1 < 1) return;
    cur--; 
    $("#panel").animate({
        marginLeft: "+=500px",
    }, 1000);

});​
于 2012-05-02T09:01:02.667 に答える
0

最後のパネルの場合、x 座標の位置を特定の値に制限できます。

于 2012-05-02T08:50:14.387 に答える
0

data-x要素の属性を使用し#panelてパネルの数を数え、どのパネルが表示されているかを追跡して移動を制限できます。また、スライド マージンを 500px (幅 460 + マージン 20px + パディング 20px) ずつ増やす必要があります。

これを試して：

var $panel = $("#panel")
$panel.data("slideCount", $("#panel li").length).data("currentSlide", 1);

$("nav.back").click(function() {
    if ($panel.data("currentSlide") < $panel.data("slideCount")) {
        $("#panel").animate({
            marginLeft: "-=500px",
        }, 1000);
        $panel.data().currentSlide++;
    }
});

$("nav.forward").click(function(){
    if ($panel.data("currentSlide") > 1) {
        $("#panel").animate({
            marginLeft: "+=500px",
        }, 1000);
        $panel.data().currentSlide--;
    }
});

フィドルの例

于 2012-05-02T08:54:02.653 に答える
0

カウントを使用して、現在の表示を追跡できます。このようなものhttp://jsfiddle.net/gS33Y/3/

于 2012-05-02T08:51:36.877 に答える