Image change every 30 seconds - loop

I would like to make an image change after 30 seconds. The javascript I'm using looks like this:

var images = new Array();
images[0] = "image1.jpg";
images[1] = "image2.jpg";
images[2] = "image3.jpg";
setTimeout("changeImage()", 30000);
var x = 0;

function changeImage() {
    document.getElementById("img").src=images[x];
    x++;
}

HTML:

<img id="img" src="startpicture.jpg">

Now I haven't tested this one yet, but if my calculations are correct it will work :)

Now what I also want is to make a "fading transition" and I would like the changing of images to loop (it restarts after all the images have been shown).

Do any of you guys know how to do that?