使用`background：url（）的衰落橫幅

我在包含我的橫幅的div標記中包含橫幅。我想要讓旗幟淡入下一張圖片，但不確定如何實現淡化效果。我曾嘗試使用jQuery fadeIn（），但失敗了。使用`background：url（）的衰落橫幅

我需要使用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(); 
}

來源

2012-05-31 Jon

控制檯中是否有任何錯誤？ – dSquared

@dSquared控制檯沒有報告任何錯誤。 – Jon

你的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

來源

2012-05-31 23:09:07 dSquared

我看到你的演示，它確實交換了圖像。當我將你的代碼應用到我的本地時，我沒有看到fadeIn（）效果。 – Jon

@ user1277607這裏是更新的小提琴;我添加了fadeOut和fadeIn效果。 http://jsfiddle.net/6YpjY/1/ – dSquared

謝謝。是否有可能無法將圖像傳遞給fadeOut（），因爲它正在創建我試圖避免的白色閃光。我嘗試用'fadeIn（）'替換'fadeOut（）'，但這並沒有成功。 – Jon

您可以使用多個div - 每幅圖像 - - 淡入淡出。 divs仍然可以使用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-31 23:11:56 meetamit

使用`background：url（）的衰落橫幅

回答

相關問題