Bilder in HTML [JAVASCRIPT] nach einigen Sekunden zu ändern

Question

Dieser Code habe ich in einem Umfang funktioniert; Es ändert sich aber nur sehr schnell, ich möchte es nach 3 Sekunden oder so ändern, aber ich kann nicht herausfinden wie. Danke im Voraus!

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

Sie Millisekunden in setInterval Zeitraum verwendet werden soll. Versuchen Sie es bitte. Ich habe auch Ihre Bedingungen vereinfacht:

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 erwartet Sie Anzahl von Millisekunden passieren (nicht Sekunden)

es wie folgt verwendet: setInterval(change_light,3000);

Answer 3

Es ist ganz einfach, Sie haben alles richtig gemacht! nur eine kleine Änderung: die Funktion setInterval (change_light, 3000); sollte seine Zeit in Millisekunden und nicht in Sekunden erhalten.

und ich würde auch einigen Rückgabewert setInterval vorschlagen möchte hinzufügen, dann werden Sie in der Lage sein, diesen Timer zu löschen, wenn mit will:

clearInterval(change_light_id); 

und hier ist Ihr fester 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; 

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>