如何通过间隔时间来循环对象以更改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>