如何在計時器上更改背景圖像

Question

我有一個簡單的全屏背景圖像，如下所示：

body {
 /* The background image used */
 background-image: url("../images/bg-one.jpg");

 /* Full height */
 height: 100vh; 
 width: 100vw;

 /* Hide scroll */
 overflow-x: hidden;
 overflow-y: hidden;

 /* Center and scale the background image nicely */
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
}

我想知道如何通過淡入/淡出過渡使背景圖像每5秒更改一次。 抱歉，如果這似乎是一個新手問題，但我剛開始學習Js / Jquery。

我的第二個問題是有可能使用純CSS3做到這一點，還是js / jquery更好？

非常感謝，艾丹

Answer 1

我已經使用jquery為您創建了一個測試用例： https : //codebrace.com/editor/afec3e661

使用純js，您可以將jquery替換為document.body.style.backgroundImage =“ url（'” + a [i ++] +“'）”;

具有淡入/淡出效果的背景變化的測試用例： https ://codebrace.com/editor/afef034d6

Answer 2

您無法在background-image上制作fade-in fade-out動畫，因為無法對該屬性進行動畫處理。 取而代之的是，您可以將2個固定的元素放置在彼此上方。

您不能在普通CSS中設置超時/間隔，而必須使用JS。 我使用過setInterval函數來切換兩個元素的.active狀態，類.active通過transition添加到元素opacity -示例在這里： https : .active