Here's an old JavaScript script using JQuery i did. You may modify it to fit your needs. This script loops through the images infinitely, and doesn't attempt to preload the images before displaying. It doesn't do an overlap fade, where the next image fades on top of the previous image, but that can be fixed if you convert the anchor element into a block-level element and adjust its size to the current image, then upon fade place the image as the background of it and start fading in the next image, and repeat. I've only been modifying this script based on "necessity," so if you notice anything you don't like, you'll have to adjust it accordingly.
CODE
var index = 0;
var links = ["URL_for_first_image", "URL_for_second_image"];
var images = ["/path/to/first_image.jpg", "/path/to/second_image.jpg"];
$(document).ready(
function(){
banner_rotate();
}
);
function banner_rotate(){
if (!$('#image-rotate').length){
$('#rotate').attr("href", links[index]);
$('#rotate').append("<img id=\"image-rotate\" src=\""+images[index]+"\" alt=\"\"/>");
}
setTimeout(doBannerFade, 7000);
}
function doBannerFade(){
$('#image-rotate').fadeOut(1250, function()
{
index++;
if (index == images.length){
index = 0;
}
$('#image-rotate').attr("src", images[index]);
$('#image-rotate').fadeIn(1250, function()
{
banner_rotate();
}
);
if (links[index] != "#removeAttr"){
$('#rotate').attr("href", links[index]);
} else {
$('#rotate').removeAttr("href");
}
}
);
}
HTML
<a id="rotate" style="border: 0;"></a>
Comment/Reply (w/o sign-up)