comment faire une boucle dans un objet avec un intervalle de temps pour changer une propriété css

Question

J'essaie de faire défiler un objet javascript pour changer l'image de fond en d'autres images toutes les 3 secondes. Je sais que je vais utiliser setInterval, une boucle for pour passer par l'objet et jQuery pour accéder à la css et changer l'arrière-plan. mais je ne suis pas sûr de savoir comment utiliser tout cela ensemble

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)'} 

j'ai essayé:

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


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

et quelque chose comme ça. mais je n'arrive pas à le faire

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

}) 

} 

Answer 1

D'abord, utilisez un tableau pour les images d'en-tête, ce qui le rend un peu plus facile. Vous trouverez ci-dessous deux fonctions qui vont boucler l'infini, en commençant par l'index 0 une fois que la longueur du tableau est atteinte, l'autre boucle le tableau une fois jusqu'à ce que tous les éléments aient été affichés une fois. (Vous aurez besoin de l'adapter à vos besoins au lieu d'écrire le texte à la 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

Dans ce codeblock:

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


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

Vous avez pas inclus votre code de mise à jour en arrière-plan. Quelque chose comme ceci pourrait être ce que vous cherchez:

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

Pourquoi ne pas utiliser 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>