平滑淡出更改背景圖片

這是我的代碼的時候，要看到它在行動，看看this Fiddle 平滑淡出更改背景圖片

HTML

<div id="header"> 
. 
. 
. 
</div>

CSS

#header { 
background: url(images/img8681.jpg); 
background-size: cover; 
border-bottom: 8px solid #333333; 
height: 620px; 
}

Javasript（jQuery）

var imgs = new Array("images/img8681.jpg","","","",""); 

function changeBg() { 
    var imgUrl = imgs[Math.floor(Math.random()*imgs.length)]; 
    $('#header').css('background-image', 'url(' + imgUrl + ')'); 
} 

setInterval(changeBg,5000);

我的問題我該如何平滑地改變圖像而不是「更換」？如何避免不斷出現相同的圖像？

來源

2014-06-08 EnexoOnoma

如果使用fadeIn和fadeOut函數，則可以更平滑地更改圖像。

var imgs = new Array("img1.jpg","img2.jpg","img3.jpg","img4.jpg","img5.jpg"); 
function changeBg() { 
    var imgUrl = imgs[Math.floor(Math.random()*imgs.length)]; 
    $('#header').css('background-image', 'url(' + imgUrl + ')'); 
    $('#header').fadeIn(1000); //this is new, will fade in smoothly 
} 

function changeBackgroundSmoothly() { 
    $('#header').fadeOut(1000, changeBg); //this is new, will fade out smoothly 
} 

setInterval(changeBackgroundSmoothly,5000);

查看this Fiddle查看結果。

關於圖像的隨機性，如果它必須是隨機的，你不能做很多事情。僅僅因爲隨機意味着相同的圖像可能會連續出現兩次，否則它不會是完全隨機的，因爲您可以排除一個結果。

解決方案可能不是隨機顯示圖像，而是以預定義的順序顯示，例如，請參閱this site。

來源

2014-07-14 09:35:10 Theolodis

嘿感謝這個代碼！我有一個問題，你怎麼能這樣做，使圖像按比例切換，而不是去白色淡化效果？另外，淡化效果可以是黑色而不是白色？謝謝。 –

只是另一種方法

$("#header").fadeOut(500, //Speed 
        function() { //On fadeOut complete 
          $(this).css("background-image", "url(img2.jpg)") //Change BG 
            .fadeIn(); //FadeIn 
        });

您可以點擊這裏：https://jsfiddle.net/rafaelaca/wwjro184/

來源

2015-08-28 13:31:41

平滑淡出更改背景圖片

回答

相關問題