Images en HTML [JAVASCRIPT] à modifier après un certain nombre de secondes

Question

Ce code fonctionne dans une certaine mesure; Cela change mais seulement très rapidement, je voudrais qu'il change après 3 secondes environ, mais je ne peux pas savoir comment. Merci d'avance!

CODE:

<img id = "theImage" src="red.jpg" alt="HTML5 Icon" style="width:250px;height:500px;" align = left> 

<script> 
var sequence = ["red.jpg", "red&amber.jpg", "green.jpg", "amber.jpg"]; 
var place = 0; 

setInterval(change_light,1); 
function change_light() { 
    place += 1; 
    if (place > sequence.length -1) { 
    place = 0; 
    } 
    document.getElementById('theImage').src = sequence[place]; 
} 

Answer 1

Vous devez utiliser millisecondes dans la période setInterval. Essayez ceci s'il vous plait. J'ai également simplifié vos conditions:

var sequence = ["red.jpg", "red&amber.jpg", "green.jpg", "amber.jpg"]; 
var place = 0; 
var frameInterval = 1000; // milliseconds 

setInterval(change_light, frameInterval); 
function change_light() { 
    place++; 
    place = place % sequence.length; 
    document.getElementById('theImage').src = sequence[place]; 
} 

Answer 2

setInterval vous attend de passer plusieurs millisecondes (pas secondes)

utiliser comme ceci: setInterval(change_light,3000);

Answer 3

C'est très simple, vous avez tout fait correctement! juste un minuscule changement: la fonction setInterval (change_light, 3000); devrait recevoir son temps en millisecondes et non en secondes.

et aussi je voudrais suggérer d'ajouter une valeur de retour à setInterval alors vous serez en mesure d'effacer ce compteur si vous voulez en utilisant:

clearInterval(change_light_id); 

et voici votre code fixe:

<img id = "theImage" src="red.jpg" alt="HTML5 Icon" style="width:250px;height:500px;" align = left> 

<script> 
var sequence = ["red.jpg", "red&amber.jpg", "green.jpg", "amber.jpg"]; 
var place = 0; 

change_light_id = setInterval(change_light,3000); 

function change_light() { 
    console.log(1); 
    place += 1; 
    if (place > sequence.length -1) { 
    place = 0; 
    } 
    document.getElementById('theImage').src = sequence[place]; 
} 
</script>