如何通過間隔時間來循環對象以更改css屬性

Question

我正在嘗試通過JavaScript對象循環來每隔3秒將背景圖像更改爲其他圖像。

我知道我將使用setInterval，for循環通過對象和jQuery訪問css並更改背景。但我不知道如何使用所有這些我一起

HTML

<div class="example"></div> 

CSS

.example { 
    height: 600px; 
    background-image: url(path/pic01.jpeg); } 

JS

var header = { 
pic01 : 'url(path/pic02.jpeg)', 
pic02 : 'url(path/pic03.jpeg)', 
pic03 : 'url(path/pic04.jpeg)', 
pic04 : 'url(path/pic05.jpeg)'} 

嘗試：

var counter = 0; 
    var i = setInterval(function(){ 


    counter++; 
    if(counter === 5) { 
     clearInterval(i); 
    } 
}, 3000); 

和類似的東西。但我似乎無法完成它

for (var key in header) { 
if (header.hasOwnProperty(key)) { 
console.log(header[key]); 

}) 

} 

Answer 1

首先，爲標題圖像使用數組，使它更容易一些。下面是兩個循環無限的函數，一旦到達數組的長度，從0開始，另一個循環數組，直到所有元素都被顯示一次。 （你需要將其調整到您的需要，而不是寫作文到div的...）

var header = [ 
 
    'url(path/pic02.jpeg)', 
 
    'url(path/pic03.jpeg)', 
 
    'url(path/pic04.jpeg)', 
 
    'url(path/pic05.jpeg)' 
 
]; 
 
var i = 0; 
 

 
function loopInfinite(arr) { 
 
    document.getElementById('foo').innerHTML = arr[i]; 
 
    i++; 
 
    if (i === arr.length) i = 0; 
 
    setTimeout(() => { 
 
    loopInfinite(arr); 
 
    }, 500); 
 
} 
 

 
function loopOnce(arr) { 
 
    document.getElementById('foo').innerHTML = arr[i]; 
 
    i++; 
 
    if (i < arr.length) { 
 
    setTimeout(() => { 
 
     loopOnce(arr); 
 
    }, 500); 
 
    } 
 
} 
 

 

 
loopInfinite(header);

<div id="foo"></div>

Answer 2

在這個代碼塊：

var counter = 0; 
    var i = setInterval(function(){ 


    counter++; 
    if(counter === 5) { 
     clearInterval(i); 
    } 
}, 3000); 

你沒有包括你的後臺更新代碼。像這樣的東西可能是你要找的東西：

var imageNumber = 0; 
var counter = 0; 
    var i = setInterval(function(){ 

    counter++; 
    if(counter === 5) { 

     // your background-updating code 
     $('.example').css('background-image',headers['pic0' + imageNumber]); 
     imageNumber++; 
     if (imageNumber > headers.length) { 
      imageNumber = 0; 
     } 


     clearInterval(i); 
    } 
}, 3000); 

Answer 3

爲什麼不使用CSS？

html, body { 
 
    position: relative; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
html, body, .example { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.example { 
 
    background-color: #333; 
 
    background-size: contain; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    animation-name: gallery; 
 
    animation-duration: 12s; 
 
    animation-timing-function: steps(1, start); 
 
    animation-iteration-count: infinite; 
 
} 
 

 
@keyframes gallery { 
 
    0%, 100% { 
 
    background-image: url(https://placebear.com/145/201) 
 
    } 
 
    25% { 
 
    background-image: url(https://placebear.com/395/205) 
 
    } 
 
    50% { 
 
    background-image: url(https://placebear.com/150/200) 
 
    } 
 
    75% { 
 
    background-image: url(https://placebear.com/145/300) 
 
    } 
 
}

<div class="example"></div>