jquery imageカルーセルが2回クリックしても機能しない

Question

私は簡単なjqueryイメージカルーセルを作ろうとしています。

は、ここに私の完全なコードです：http://jsfiddle.net/6fwbS/19/あなたが左に画像をスライドさせ、もう1つは消えるように、「増加」ボタンをクリックすると、次の関数が呼び出されます

。私が経験している問題は、一度しか動作しないように見えるということです。最初にクリックすると、次のイメージがコンテナに読み込まれます。もう一度クリックすると、そのアラートが2回呼び出されます。なぜ2回目のクリックでアラートが2回呼び出されているのか分かりません。 3回目にクリックすると、警告は表示されません。どんな助けでも大歓迎です。最終目標の例として、実行後に減少をクリックします。私が最終的にここでやろうとしているのは、各ボタンがクリックされたときに新しい画像をコンテナに入れ、画像を前後に循環させることです。

function slide_img_left() { 

    var imgs = imgArr.length; 

    a++; 
    if (a >= imgs) { 
     a = 0; 
    } 

    b = a - 1; 
    c = a + 1; 

    if (b < 0) { 
     b = imgs - 1; 
    } 
    if (c >= imgs) { 
     c = 0; 
    } 

    $('.left_slot').animate({ 
     opacity: 0, 
     left: '-=50px' 
    }, 300, function() { 
     $('.left_slot').remove(); 
    }); 

    $('.middle_slot').animate({ 
     left: '-=50px' 
    }, 300, function() { 
     $('.middle_slot').attr('class', 'left_slot'); 
     $('.right_slot').attr('class', 'middle_slot'); 
     alert(c); 

    }); 

    $('.right_slot').animate({ 
     left: '-=50px' 
    }, 300); 

    $("#basic_div").append(imgArr[c][0]); 
     $("#varsDiv").html(" var b = " + b + " var a = " + a + " var c = " + c); 

} 

Answer 1

問題は、あなたの完全コールバックで$('.left_slot')が他の完全コールバックのいずれかによって作成された新しい左のスロットを参照してもよいということです。

var left = $('.left_slot'); 
var middle = $('.middle_slot'); 
var right = $('.right_slot'); 

left.animate({ 
    opacity: 0, 
    left: '-=50px' 
}, 300, function() { 
    left.remove(); 
}); 


middle.animate({ 
    left: '-=50px' 
}, 300, function() { 
    middle.attr('class', 'left_slot'); 
    right.attr('class', 'middle_slot'); 
    alert(c); 

}); 

right.animate({ 
    left: '-=50px' 
}, 300); 

リンクを更新jsFiddleに：それは一度だけ警告するよう

これはslide_img_left()の関連部分が固定されている（編集：フォークバージョンを指すようにリンクを更新）