How to change an image every 3 seconds?

How do i change an image every 3 seconds between 3 images and on a loop? What is the simplest way to do it?

use javascript's setInterval. array with your images and change the value of the img tag when the interval expires?

I tried this and it does nothing

var AngusYoungInt = 0;
var AngusYoung = new Array();
AngusYoung[1] = new Image();
AngusYoung[1].src = "AngusYoung2.jpg";


var int=setInterval("changeAdd()",3000)

function changeAdd()
{
AngusYoungInt = AngusYoungInt + 1;
document.getElementById("add1").src = "AngusYoung[AngusYoungInt]";
}

var imgArray = []

imgArray[0] = "image1.jpg"
imgArray[1] = "image2.jpg"
imgArray[2] = "image3.jpg"
imgArray[3] = "image4.jpg"

var i = 0; //set a counter to keep track of where we are in the array

function imgChanger(){
if(i == imgArray.length){ //if we are on the last item of the array
clearInterval(timer); //clear the interval set
return; //and exit the function
}
alert(imgArray[i]); //your code here
i++; //increment i each time the function is run
var timer = setInterval( "imgChanger()", 3000 ); //setInterval triggers this function, (specified in quotes) every 3 seconds.
}


check out http://www.w3schools.com/js/js_timing.asp for how setInterval works