1

現在、スクロールスライドショーを最初から作成していますが、問題が発生しました。

次のボタンを複数回押すと、スライドが一緒に実行され始めます。次のスライドが開始する前に、現在のスライドが停止するまで次のスライドが待機することを確認するにはどうすればよいですか。

    var scrollAmount=910
    var image0Left=-scrollAmount;
    var image1Left=0;
    var image2Left=scrollAmount;
    var scrollSpeed0=2000;
    var scrollSpeed1=2000;
    var scrollSpeed2=2000;
    $(document).ready(function() {
        $("#left-arrow").click(showPreviousSlide);
        $("#right-arrow").click(showNextSlide);
    });

    function showPreviousSlide(){
        image0Left+=scrollAmount;
        if(image0Left > scrollAmount){
            image0Left=-scrollAmount;
            scrollSpeed0=0;
        }

        image1Left+=scrollAmount;
        if(image1Left > scrollAmount){
            image1Left=-scrollAmount;
            scrollSpeed1=0;
        }

        image2Left+=scrollAmount;
        if(image2Left > scrollAmount){
            image2Left=-scrollAmount;
            scrollSpeed2=0;
        }

        $("#slide0").animate({left: image0Left}, scrollSpeed0);
        scrollSpeed0=2000;
        $("#slide1").animate({left: image1Left}, scrollSpeed1);
        scrollSpeed1=2000;
        $("#slide2").animate({left: image2Left}, scrollSpeed2);
        scrollSpeed2=2000;
    }

    function showNextSlide() {
        image0Left-=scrollAmount;
        if(image0Left < -scrollAmount){
            image0Left=scrollAmount;
            scrollSpeed0=0;
        }

        image1Left-=scrollAmount;
        if(image1Left < -scrollAmount){
            image1Left=scrollAmount;
            scrollSpeed1=0;
        }

        image2Left-=scrollAmount;
        if(image2Left < -scrollAmount){
            image2Left=scrollAmount;
            scrollSpeed2=0;
        }


        $("#slide0").animate({left: image0Left}, scrollSpeed0);
        scrollSpeed0=2000;
        $("#slide1").animate({left: image1Left}, scrollSpeed1);
        scrollSpeed1=2000;
        $("#slide2").animate({left: image2Left}, scrollSpeed2);
        scrollSpeed2=2000;
    }

これがすべての制御スクリプトコードです。こちらが実際のサイトへのリンクです。サイト

showPreviousSlideまたはshowNextSlideが呼び出されるたびに移動される3つの画像スライドがあります。showPreviousSlide / showNextSlide関数の1回の反復がスライドの移動を終了してから、再度呼び出されるようにするにはどうすればよいですか？スライドショーで何が起こっているかを簡単に確認できるように、スライドショーのdiv overfill：hiddenを削除しました。

ご協力ありがとうございました。

モーガン

4

1 に答える 1

1

.animate()次のように完了コールバックを渡すことができます。

animationCompleted = false;
$("#slide0").animate({left: image0Left}, scrollSpeed0, function() {
    animationCompleted = true;
});

次にanimationCompleted、関数の値を確認します。

function showPreviousSlide(){
    if (!animationCompleted) return;
    // ...
}

追加情報と例については、ドキュメントをご覧ください。

于 2012-04-24T04:38:37.457 に答える