0

バナーdivを含むタグに含まれるバナーがあります。バナーを次の画像にフェードさせたいのですが、フェード効果を実現する方法がわかりません。jQuery fadeIn() を使用してみましたが、失敗しました。

を使用する必要があるのbackground: url()は、ブラウザのサイズが変更されたときに、このバナー画像を快適にサイズ変更したいからです。これが私の問題に取り組む最善の方法であるかどうかはわかりません。

編集 - 私の現在のコードはバナーの画像を入れ替えますが、fadeIn() 効果を適用しません。コンソールはエラーを報告しません。

CSS:

header div#banner {
    background: url(../image/banner/00.jpg) no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 300px;
}

JavaScript:

var bannerImages = new Array();
var bannerCounter = 0;

function run() {
    loadBannerImages();
    runBannerTimer();
}

function loadBannerImages() {
    var filePath = "image/banner/";
    bannerImages[0] = filePath + "00.jpg";
    bannerImages[1] = filePath + "01.jpg";
    bannerImages[2] = filePath + "02.jpg";
    bannerImages[3] = filePath + "03.jpg";
    bannerImages[4] = filePath + "04.jpg";
}

function runBannerTimer() {
    var t=setTimeout("swapBannerImage()",2000);
}

function swapBannerImage() {
    $('#banner').fadeIn(1000, function() {
        $('#banner').css('background', 'url(' + bannerImages[bannerCounter] + ') no-repeat center');
    });
    bannerCounter++;

    if (bannerCounter >= bannerImages.length) {
        bannerCounter = 0;
    }

    runBannerTimer();
}
4

2 に答える 2

1

setTimeout が正しくありません。代わりに次を試してください。

function runBannerTimer() {
    var t=setTimeout(function(){
        swapBannerImage()
    },2000);
}

編集

更新されたバナー スワップ機能は次のとおりです。

function swapBannerImage() {
    $('#banner').fadeOut('slow', function(){
        $('#banner').css('background', 'url(' + bannerImages[bannerCounter] + ') no-repeat center').fadeIn('slow');
    });

    bannerCounter++;

    if (bannerCounter >= bannerImages.length) {
        bannerCounter = 0;
    }

    runBannerTimer();
}

更新されたデモはこちら

于 2012-05-31T23:09:07.330 に答える
0

複数の div (画像ごとに 1 つ) を使用して、それらをフェードイン/フェードアウトすることができます。div は引き続き必要に応じて css を使用できbackgroundます。絶対に配置する必要があるだけで、それらが重なり合って表示されます。ただし、絶対位置の div を親 div と一緒にサイズ変更する (つまり、「快適な」サイズ変更効果を得る) には、css を次のように設定する必要があります。

header div#banner {
    ... /* your background stuff here */
    position: absolute;
    left: 0;
    right: 0;
    height: 300px;
}

leftと の両方を割り当てることに注意してください。rightこれにより、親の幅全体が占有されます。そして、親が持っていることを確認してposition:relativeください。

于 2012-05-31T23:11:56.307 に答える