使用“background:url(）”淡出横幅

Fading Banner Using `background:url()`

本文关键字：淡出 background url 使用      更新时间：2023-09-26

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

您的设置超时不正确;请尝试以下操作：

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

此处更新的演示

您可以使用多个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。

相关文章：