1

jquery フェードインを使用して数秒ごとに背景画像をループしようとしています ここに私のHTMLがあります

<div class="bg" style="background: url(images/header1.jpg);"> </div>
<div class="bg" style="background: url(images/header2.jpg);"> </div>
<div class="bg" style="background: url(images/header3.jpg);"> </div>

ここに私のJqueryがあります

function changeBackground () {
    $(".bg").first().fadeIn("slow", function showNext() {
        $(this).next("div").delay(1000).fadeIn("slow", showNext);
    });
}

$(document).ready(function() {
    setTimeout(changeBackground, 0);        
});

前の画像を非表示にする方法がわからないので、次回再紹介できます。z-index関数がループするか、画像を一番上に表示するために使用できますか?

4

5 に答える 5

5 
function changeBackground() {
    $(".bg").first().fadeIn("slow", function showNext() {
        var next = $(this).next('div').length ? $(this).next('div') : $(".bg").first();
        $(this).siblings().fadeOut('slow').delay(1000);
        next.fadeIn("slow", showNext);
    });
}


$(document).ready(function () {
    setTimeout(changeBackground, 100);
});

フィドル

于 2013-08-02T14:36:01.493 に答える