0

jqueryカルーセルの作成に取り組んでいます。この関数は、画像を左にスライドさせ、移動した位置に応じてクラスを変更します。（「増加」というボタンをクリックした後）。左の画像を削除し、中央のクラスを左に変更し、右を中央に変更し、右側に新しい画像を追加して右の位置クラスを与えます。実際の動作を見たい場合のフィドルは次のとおりです。http://jsfiddle.net/6fwbS/25/

関数が 2 回目に呼び出されると、すべてが台無しになります。新しい画像が追加されますが、不透明度は 0 で、クラスは .right_slot です。ここで何が間違っているのか分かりますか？前もって感謝します。

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;
        }

        var left = $('.left_slot'); var middle = $('.middle_slot'); var right = $('.right_slot');
        var newImg = imgArr[c][0];
        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');
        });

        right.animate({
            left: '-=50px'
        }, 300, function(){
            $("#basic_div").append(newImg);
            newImg.attr('class', 'right_slot'); 
        });

        $("#varsDiv").html(" var b = " + b + " var a = " + a + " var c = " + c);

    }
4

1 に答える 1

1

  • .clone()画像を作成するか、スタイルに加えた変更を元に戻す必要があります。

    $("#basic_div").append(imgArr[b].clone());
$("#basic_div").append(imgArr[a].clone());
$("#basic_div").append(imgArr[c].clone());
...
function slide_img_left() {
  ...
  var newImg = imgArr[c].clone();
  ...
}

  • 左に移動left_slotして非表示にすると、レイアウトが台無しになります。middle_slot見えなくなる。

これは、わずかに異なるフェードアウト効果を持つ増加機能の実際の例です。

于 2012-04-21T22:48:34.547 に答える