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——每个图像一个——并淡入/淡出它们。div 仍然可以background像你想要的那样使用 css，你只需要绝对定位它们，这样它们就会出现在另一个之上。但是，要让绝对定位的 div 与父 div 一起调整大小（即获得“令人愉悦的”调整大小效果），您必须像这样设置 css：

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

请注意，您将同时分配leftand right，这将使其占据父级的整个宽度。并且，确保父母有position:relative.

于 2012-05-31T23:11:56.307 回答