0

特定の間隔で背景画像を変更する必要があります。変更される背景には約4〜5枚の画像があります。また、1つの画像がフェードインし始め、完全にフェードインする前に次の画像がフェードインし始めるという、優れたトランジション効果が必要です。

必要な機能については、http： //www.virgin-atlantic.com/gb/en.htmlをご覧ください。

私が持っている構造は次のとおりです：

<div class="items">
            <div id="backWallpaper" style="left: 0px; top: 0px; overflow: hidden; position: absolute;
                z-index: -1; margin: 0px; padding: 0px; display: none;" class="carousel_item">
                <img class="bg_slider" src="images/bg_img_01.jpg" alt="Get the most out of your Trade In">
            </div>
            <div id="backWallpaper" style="left: 0px; top: 0px; overflow: hidden; position: absolute;
                z-index: -1; margin: 0px; padding: 0px; display: none;" class="carousel_item">
                <img class="bg_slider" src="images/bg_img_02.jpg" alt="Get the most out of your Trade In">
            </div>
            <div id="backWallpaper" style="left: 0px; top: 0px; overflow: hidden; position: absolute;
                z-index: -1; margin: 0px; padding: 0px; display: none;" class="carousel_item">
                <img class="bg_slider" src="images/bg_img_03.jpg" alt="Get the most out of your Trade In">
            </div>
            <div id="backWallpaper" style="left: 0px; top: 0px; overflow: hidden; position: absolute;
                z-index: -1; margin: 0px; padding: 0px; display: none;" class="carousel_item">
                <img class="bg_slider" src="images/bg_img_04.jpg" alt="Get the most out of your Trade In">
            </div>
        </div>

画像を交換するコードは次のとおりです。

$(window).load(function () {
            //load first background after page loads.
            $('.carousel_item').eq(0).fadeIn(2000);
            setTimeout(changeBackground, 4000);
        });

        //indexers
        var fadeOut = 0;
        var fadeIn = 1;

        function changeBackground() {
            //fadeOut the first image
            $('.carousel_item').eq(fadeOut).fadeOut(1000);
            //fadeIn the second image
            $('.carousel_item').eq(fadeIn).fadeIn(1500);
            //increament indexers
            fadeOut += 1;
            fadeIn += 1;
            //if indexer becomes greater than 3 reset it to 0
            if (fadeOut > 3)
                fadeOut = 0;
            if (fadeIn > 3)
                fadeIn = 0;

            //again set the timeout to loop.
            setTimeout(changeBackground, 4000);
        }

ここで問題となるのは、コードがおかしな動作をしていることです。最後の画像まで、つまり（index：3）画像はきれいに表示されます。その後、最後の画像が動かなくなったようです。なんらかの理由で最後のインデックスに対してfadeOutが機能しないかのように。

このコード設定で何が間違っている可能性があるかについて、親切にアドバイスしてください。

4

2 に答える 2

5

このjsfiddleは機能します：

var current = 0,
    speed = 1500,
    $imgs = $('img', '#slider'),
    imgAmount = $imgs.length;

$imgs.css('position', 'absolute').hide().first().show();

function swapImages() {
    var $currentImg = $($imgs[current]);
    if(current == imgAmount-1) current = -1;
    var $nextImg = $($imgs[++current]);
    // animation speed should be the same for both images so we have a smooth change
    $currentImg.fadeOut(speed);
    $nextImg.fadeIn(speed);
}

window.setInterval(swapImages, 4000);
于 2012-07-02T11:25:54.757 に答える
0

この問題をさらにテストするために、carousel_item div のスタイルのロードを css クラスに移動し、fadeOut が div のdisplay:blockプロパティを削除していないことに気付きました。

フェードアウトには、幅が 0 で高さが 0 の要素に問題があるようです。そのためpostion:absolute、carousel_item div から削除すると、含まれている画像のサイズに成長し、問題が解決されました。

この問題についてさらに読むには、このリンクで受け入れられた回答を確認してください jQuery fadeOut is not changing display property

simon と jfrej の助けと jsFiddle のセットアップに感謝します。

于 2012-07-02T12:39:38.153 に答える