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

Answer 2

你可以使用多个div - 每个图像一个 - 并淡入/淡出它们。 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。

使用`background：url（）`的退色横幅

2 个答案: