0

jquery機能を使って画像のスライドショーを作りましたfadeIn。これで、1 つの小さな問題を除いて、スライドショーは問題なく動作します。最後の画像に到達すると、元に戻り、最初の画像がフェードインするはずです。しかし、代わりに、最初の画像だけが表示されます。フェードインしません。以下は私のjqueryコードです。

var index = 1;

 $(document).ready(function() {
    $('.wallpaper:not(:nth-child(' + index + '))').css({ display : 'none' });
    slideShow();
});

function slideShow() {
    var $firstImg = $('.wallpaper:nth-child(' + index + ')');
    $('#para1 h3').text(index);
    if ($firstImg.next().length) {
    index ++;
    } else {
    index = 1;
}

var $nextImg = $('.wallpaper:nth-child(' + index + ')');

$nextImg.delay(6000).fadeIn(2000, function() {
    $firstImg.hide();
    $('#para1 h3').text(index); // This is just for debugging purposes
    $('#para2 h3').text($firstImg.attr('alt') + ' ' + $firstImg.css('display') + ' ' + 
    $nextImg.attr('alt') + ' ' + $nextImg.css('display')); // This too
    setTimeout(slideShow());
});
}

助けていただければ幸いです。答えでは、なぜこれが解決策とともに起こっているのかを知る必要があります。（私は新しいです）ありがとう。

4

2 に答える 2

0

問題は最後の関数の実行にあります。$firstImg.hide();$nextImg が $firstImg の前に何らかの形で z インデックス付けされていない場合、すぐに消えてしまいます。

以前の実行では、フェードインされている画像が前の画像の上に表示されます。したがって、最後の写真は最初の写真の上にあります。

この「ループ」の終わりに最初のものを再びフェードインすると、最後のものはまだ上にあり、 を呼び出したときにのみ消えますhide()。

于 2013-08-19T05:52:40.167 に答える
0

画像が 1 枚ずつ重なってフェードインし、フェードインが完了すると背景の古い画像が非表示になります。これが機能する理由は、後続の画像がすべて前の画像の上に表示されるためです。

ただし、最後の画像では、下からの画像がフェードインしますが、一番上の画像がその上に表示されているため、表示されません。セット内の最初の画像が背景にフェード インし、その$firstImage.hide()上の画像が非表示になると、突然 に表示されます。

于 2013-08-19T05:52:03.997 に答える