淡出我的背景變化

我必須每5秒更換一次div bg。淡出我的背景變化

但我真的想使這個過渡的淡入淡出效果..

我這樣做（但我得到的突然變化，而不是一個一個淡出的...）：

<script> 
var bgArr = ["images/1.jpg", "images/2.jpg", "images/3.jpg" ]; 
var i=0; 
var interval = self.setInterval("changeBg()", 5000) 

function changeBg() { 
if (i>(bgArr.length-1)) { 
    i=0 
    $("#header").css("background-image", "url("+bgArr[i]+")"); 
} 
else { 
    $("#header").css("background-image", "url("+bgArr[i]+")"); 
} 
i++; 
}; 


</script>

如何在不顯示空白的情況下將此過渡作爲淡入淡出（我的意思是......第二張圖像慢慢地出現在第一張圖像上）？

我真的卡住.. :(

來源

2015-05-02 Marcelo Barganha

你可以用你的所有代碼添加一個[JSFiddle]（http://www.jsfiddle.com），這樣我們可以幫助你更多嗎？ – Downgoat

你需要使用兩個層疊在一起。 – epascarello

不幸的是，沒有背景不透明的東西，因此圖像需要在標籤內，否則整個元素將不得不褪色。 – Shikkediel

如何使用.fadeTo()：

DEMO：https://jsfiddle.net/w13bhcgt/

$(function() { 
    var bgArr = ['http://png-5.findicons.com/files/icons/1243/hello_kitty/256/flower.png', 
     'http://www.vectorimages.org/01/01201101251549265911.png', 
     'http://media.janm.org/exhibitions/hellokitty/JANM-HelloKitty-icon-bow.png']; 

    var i = 0; 

    function Change() { 
     $("#header") 
      .fadeTo('slow', 1) 
      .css("background-image", "url(" + bgArr[i] + ")") 
      .fadeTo('slow', 0); 
     i++; 
     if (i < bgArr.length) setTimeout(Change, 2000); 
    } 
    Change(0); 
});

來源

2015-05-02 01:50:27 renakre

差不多！問題是，我試圖褪色而不顯示空格！像圖像2的東西在圖像上淡出1 ...並獲得無限循環！ –

那麼，fadeIn（）和fadeOut（）有什麼區別呢？只有背景下的穩定過渡*不可能像這樣。 – Shikkediel

@MarceloBarganha我想這是你能得到的最好的背景。您可能需要在後臺修改一個div並更改其包含的圖像。 – renakre

你可以嘗試bgshuffle腳本它使用jQueryUI的您將有。在你的頁面的某個地方包含JqueryUI腳本發佈在github上，如果你喜歡，可以隨意擴展它：

https://github.com/vikaskumarsingh123/bgshuffle/

你可以簡單地調用它像：

shuffleBG(['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg']);//the array of wallpapers

或高級用法：

shuffleBG(['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg'], //the array of wallpapers 
     '10000', //time between wallpaper change, defaults to 10000ms (10secs) 
     '1000', //fade in fade out animation speed, defaults to 1000ms 
     'white' //color to fade in and out of, defaults to body backgroundColor or white 
);

你通常會調用document.load此功能，它會開始改變背景圖像每10秒鐘淡出一次。

來源

2017-06-01 07:53:50 thewoodcutter

淡出我的背景變化

回答

相關問題