How to rotate 4 (or more) images, fading between each one?

I'd highly recommend the jQuery Cycle plugin. It may do more than you're looking for in this case, but it's well structured and easy to setup. There's also a lightweight version called jQuery Cycle Lite which just supports fade transitions.

You can use a div and an img, like so:

<div id="featureImgContainer">    <img src="/images/image-1.jpg" id="featureImg" /></div>

In your Javascript do something like this (pseudo-jQuery):

function rotateImage(newImage) {    var oldImage = $("#featureImg").image();    $("#featureImgContainer").css({backgroundImage: "url('" + oldImage + "')"}); // TODO Escape URL    $("#featureImg").image(newImage).opacity(0).fadeIn();}

Basically, we make the div's background the "old" image, and the img the new one. We set the img to 0 opacity, and fade it in, so it appears as if the old image is fading into the new one. After the fade in, the div isn't shown any more.

Take care to set up the CSS appropriately to set the width/height of the div and the background position where appropriate.

you can stay with the core of jQuery and have a loop bring up the z-index..

it can be done in a very simple way...