0

シンプルなjquery画像カルーセルを作ろうとしています。

ここに私の完全なコードがあります: http://jsfiddle.net/6fwbS/19/

次の関数は、「増加」ボタンをクリックして画像を左にスライドさせて非表示にするときに呼び出されます。私が経験している問題は、一度しか機能しないように見えることです。最初にクリックすると、次の画像がコンテナに読み込まれます。2 回目にクリックすると、そのアラートが 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);

}
4

1 に答える 1

1

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

これは、fixed の関連部分であるslide_img_left()ため、アラートは 1 回だけになります。

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へのリンク(編集:フォークされたバージョンを指すようにリンクを更新しました。)

于 2012-04-21T19:29:54.280 に答える