jquery.bannerrotator

jquery.bannerrotator.css

.bannerrotator a.linkbox {
	background: #ddd;
	opacity: .5;
	filter: alpha(opacity=50);
}
.bannerrotator a.linkbox:hover {
	background: white;
	opacity: 1;
	filter: alpha(opacity=100);
}
.bannerrotator a.selected {
	background: #fff;
	opacity: 1;
	filter: alpha(opacity=100);
}
.bannerrotator a.linkbox:hover {
	background: white;
}

jquery.bannerrotator.js

/*!
* jQuery Banner Rotator Plugin
* Version: 0 (unreleased)
* Requires: jQuery v1.6.2 or later
* Author: Tom Robinson
*/

/*globals $, jQuery, window, event */
/*jslint browser: true */
(function ($) {

    "use strict";

    $.fn.bannerrotator = function (options) {

        var currentIndex, timeoutId, settings, getRandomInt, setBanner, setInitialBanner;

        // Default settings which will be merged into passed options
        settings = {
            "box": {
                "height": 20,
                "width": 20,
                "padding": 10
            },
	        "transition": {
				"delay": 5000,
				"fadespeed": "fast",
				"easing": "swing"
			}
        };

        getRandomInt = function (min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        };

        setBanner = function (container, index) {

            currentIndex = index;

            container.find("a").first()
                .fadeTo(settings.transition.fadespeed, 0, settings.transition.easing, function () {
                    // Set the main image (should be the first anchor)
                    container.find("a").first()
	                    .attr("href", settings.images[index].href)
	                    .find("img").first()
	                    .attr("src", settings.images[index].src)
	                    .attr("alt", settings.images[index].alt);

                    // Set the current link box state
                    container.find("a.linkbox").removeClass("selected");
                    var selectedLinkBox = $(container.find("a.linkbox")[index]);
                    selectedLinkBox.addClass("selected");
                })
                .fadeTo(settings.transition.fadespeed, 1, settings.transition.easing);

            window.clearTimeout(timeoutId);

            timeoutId = window.setTimeout(function () {
                var newIndex;
                if (currentIndex === undefined) {
                    newIndex = getRandomInt(0, settings.images.length - 1);
                } else if (currentIndex === settings.images.length - 1) {
                    newIndex = 0;
                } else {
                    newIndex = currentIndex + 1;
                } 
                setBanner(container, newIndex);
            }, settings.transition.delay);
        };

        setInitialBanner = function (container) {
            var initialIndex = getRandomInt(0, settings.images.length - 1);
            setBanner(container, initialIndex);
        };

        return this.each(function () {

            var widthOfAllBoxes, top, container, imageCache;

            // If options exist, lets merge them with our default settings
            if (options) {
                $.extend(settings, options);
            }
            
            imageCache = [];

            // Set up the container structure
            container = $(this);
            container.empty().css("position", "relative").css("z-index", "3").append("<a><img></a>");
            $(container.find("img")).css("height", settings.containerImage.height);

            // Calculate link box layout
            widthOfAllBoxes = settings.images.length * (settings.box.width + settings.box.padding) - settings.box.padding;
            top = settings.containerImage.height - settings.containerImage.padding - settings.box.height;

            // Add the link box structure, one for each of the configured images
            $.each(settings.images, function (index, value) {

				var cacheImage, left;

                if (value !== undefined) {

                    cacheImage = document.createElement('img');
                    cacheImage.src = value.src;
                    imageCache.push(cacheImage);

	                left = settings.containerImage.width - widthOfAllBoxes - settings.containerImage.padding + ((settings.box.width + settings.box.padding) * index);
	                container.append("<a href='" + value.href + "' title='" + value.alt + "' class='linkbox' style='z-index:2;left:" + left.toString() + "px;border:1px solid #333;height:" + settings.box.height.toString() + "px;width:" + settings.box.width.toString() + "px;position:absolute;top:" + top.toString() + "px;'></a>");
	
	                // Add the click event handler for the link box we've just added
	                container.find("a").last().click(function () {
	                    setBanner(container, index);
	                    if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; }
	                    window.event.cancelBubble = true;
	                    return false;
	                });
                }
            });

            setInitialBanner(container);

        });

    };
}(jQuery));

usage.js

$(document).ready(function () {
    $('.bannerrotator').bannerrotator({
    	"containerImage": {
	    "width": 960,
            "height": 314,
            "padding": 20
        },
        "images" [
	    { "src": "example1.jpg", "href": "example1.html", "alt": "Example 1" },
	    { "src": "example2.jpg", "href": "example2.html", "alt": "Example 2" },
	    { "src": "example3.jpg", "href": "example3.html", "alt": "Example 3" },
	    { "src": "example4.jpg", "href": "example4.html", "alt": "Example 4" }]
        }
    });
});