javascript - 使用 `background:url()` 淡化横幅

Question

我有一个包含在包含我的横幅的 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();
}

Answer 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();
}

Updated Demo Here