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

Question

I have 4 images, which I want to fade between each other in a loop. I have something like the following:

<img src="/images/image-1.jpg" id="featureImg1" />
<img src="/images/image-2.jpg" id="featureImg2" style="display:none;" />
<img src="/images/image-3.jpg" id="featureImg3" style="display:none;" />
<img src="/images/image-4.jpg" id="featureImg4" style="display:none;" />

I am up for revisions to the HTML, although I cannot use absolute positioning in this case. I am using jQuery else where on the site, so it's available. I also need to deal with an image not being loaded right away as the images are larger.

Answer 1

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.