0

私は自分自身をよりよく知るために、独自のjquery画像カルーセルを作成しようとしています。

ここで例を見つけることができます。

カルーセルは、右全体をスライドさせ、最後に

  • 最初の前にスライドさせ、最後を非表示にします。

    問題は、誰かが次/前のボタンをスパムすると、カルーセル全体が右に移動し、前/次が1秒に1回使用されるか、jqueryで短い間隔(500)でクリックされるように設定すると、何かが起こらないことです。

    コードの関連部分は次のとおりです。

    function initUl(){
    var li_width = $('.upper li').outerWidth();
    var upper_width=$('.upper').outerWidth();
    var lower_width=$('.lower').outerWidth();
    var upper_pos = $('.upper').position();
    var lower_pos = $('.lower').position();

    lastBeforeFirst();

    $('.upper').css({'left': upper_pos.left + (-1*li_width)});
    $('.lower').css({'left': lower_pos.left + (-1*li_width)});
    $('.upper').css({'width': upper_width + li_width});
    $('.lower').css({'width': lower_width + li_width});
   }

function moveBothRight(){
    var speed = 200;
    var li_width = $('.upper li').outerWidth();
    var upper_pos = $('.upper').position();
    var lower_pos = $('.lower').position();

    $('.upper').animate({'left' :upper_pos.left + li_width}, speed,fixUpperPosR);
    $('.lower').animate({'left' :lower_pos.left + li_width}, speed,fixLowerPosR);   
   }

   function fixUpperPosR(){
    var li_width = $('.upper li').outerWidth();
    var upper_pos = $('.upper').position();

    $('.upper').css({'left': upper_pos.left - li_width});
    }

    function fixLowerPosR(){
    lastBeforeFirst();
    var li_width = $('.upper li').outerWidth();
    var lower_pos = $('.lower').position();

    $('.lower').css({'left': lower_pos.left - li_width});
     }
     function lastBeforeFirst(){

var first = $('.upper ul li:first');
var last = $('.upper ul li:last');

$(first).before($(last));

first = $('.lower ul li:first');
last = $('.lower ul li:last');
$(first).before($(last));
     }

    このコードはすべてを右に移動する責任があり、次のクリックで呼び出されます。左側の唯一の違いは

    $('.lower').css({'left': lower_pos.left + li_width});

    および firstBeforeLast(); 電話

    これはブラウザーの問題ですか (css をすばやく更新することはできません)、したがって、ボタンを押す頻度を制限する必要がありますか、それとも何か不足していますか?

    • 4

    1 に答える 1

    2

    この問題は、アニメーションが非同期で実行されることが原因です。

    ボタンがクリックされるたびに、現在のアニメーションを停止する必要があります。jumpToEnd

    例えば：

    $('.upper').stop(true, true).animate(...);

    これにより、現在のアニメーションがすぐに完了し、必要に応じて css が更新されます。

    于 2012-10-08T14:20:07.830 に答える