Images in HTML [JAVASCRIPT] to change after a number of seconds

Question

This code I have works to an extent; It changes but only very quickly, I would like it to change after 3 seconds or so, but I can't find out how. Thanks in advance!

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

You should use milliseconds in setInterval period. Try this please. I also simplified your 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];
}