// bannerRotate, Version 1.1.3
// Copyright (c) Oct 3, 2010 adardesign.com
// bannerRotate is freely distributable under the terms of an MIT-style license
// This means you are free to use the code, but please leave this copyright notice intact
// everything inside the "defaults" is configurable.
(function ($) {
    $.fn.bannerRotate = function (options) {
        var defaults = {
            speed: 500,
            secSpeed: 500,
            interval: 4000,
            shouldHoverSwitch: false,
            builedNav: function (a) {
                var i = 0,
                    container = $("<div class='controlsContainer'>").hide(),
                    navElements = "";
                for (i = 0; i < a; i++) {
                    navElements += "<a href='#'>";
                }
                container.html(navElements);
                return container;
            },
            stopAnimation: function (b) {
                b.stop(true, true);
            },
            stopInterval: function (interv) {
                clearInterval(interv);
            },
            stopTimeout: function (timeOut) {
                clearTimeout(timeOut);
            },
            addHoverUsability: {
                active: true,
                getMiliseconds: function () {
                    return new Date().getTime();
                },
                timeLapsed: function (initTime) {
                    var timeNow = this.getMiliseconds();
                    return timeNow - initTime;
                }
            }
        };
        var options = $.extend(defaults, options);
        return this.each(function (i, el) {
            var bannerContainer = $(el),
                banners = bannerContainer.children(),
                bannersLength = banners.length,
                bannerNav = bannerContainer.append((options.builedNav(bannersLength).fadeIn(options.secSpeed))).find(".controlsContainer a"),
                next = 1,
                last = 0,
                updateValues = function (clicked) {
                    if (clicked) {
                        last = indexOfClicked;
                        next = (last + 1) % bannersLength;
                    }
                    else {
                        last = next;
                        next = (next + 1) % bannersLength;
                    }
                },
                initTime = 0,
                doFadeInterval, fadeTimeout, fadeInterval = function () {
                    if (options.addHoverUsability.active) {
                        do {
                            initTime = options.addHoverUsability.getMiliseconds();
                        } while (0);
                    }
                    banners.eq(next).fadeIn(options.speed);
                    banners.eq(last).fadeOut(options.speed);
                    bannerNav.eq(last).removeClass("active");
                    bannerNav.eq(next).addClass("active");
                    updateValues();
                },
                callDoFade = function () {
                    doFadeInterval = setInterval(fadeInterval, options.interval);
                };
            // init things to do
            callDoFade();
            if (options.addHoverUsability.active) {
                do {
                    initTime = options.addHoverUsability.getMiliseconds();
                } while (0);
            }
            bannerNav.eq(0).addClass("active");
            banners.not(":eq(0)").hide();
            // prevents children elements to trigger mouseout from rotating banner
            //TODO: figure out why jQuery 1.4.3 doesnt respond when false passed in as the callback
            banners.children().bind("mouseover", function (e) {
                e.preventDefault();
            });
            bannerContainer.hover(function () {
                options.stopAnimation(banners);
                options.stopInterval(doFadeInterval);
                if (fadeTimeout) {
                    options.stopTimeout(fadeTimeout);
                }
                if (intervalTimeout) {
                    options.stopTimeout(intervalTimeout);
                }
            }, function () {
                if (options.addHoverUsability.active) {
                    timeLapsed = options.addHoverUsability.timeLapsed(initTime);
                    if (timeLapsed >= options.interval) {
                        callDoFade();
                        fadeInterval();
                    } else {
                        fadeTimeout = setTimeout(fadeInterval, options.interval - timeLapsed);
                        fadeTimeout = setTimeout(callDoFade, (options.interval - timeLapsed) + options.speed);
                    }
                }
                else {
                    callDoFade();
                }
            })
            // delegate (to boost performance)
            .find(".controlsContainer").delegate("a", "click", function () {
                var clickedNav = $(this);
                if (clickedNav.hasClass("active")) {
                    return false
                }
                //options.stopAnimation(banners);
                //options.stopInterval(doFadeInterval);
                clickedNav.siblings().removeClass("active");
                clickedNav.addClass("active");
                indexOfClicked = bannerNav.index(clickedNav);
                banners.eq(last).fadeOut(options.secSpeed);
                banners.eq(indexOfClicked).fadeIn(options.secSpeed, function () {
                    banners.eq(indexOfClicked).css("opacity", 1);
                });
                if (options.addHoverUsability.active) {
                    initTime = options.addHoverUsability.getMiliseconds();
                }
                updateValues(true);
                return false;
            }).delegate("a", "mouseover", function () {
                if (options.shouldHoverSwitch) {
                    $(this).click();
                }
            });
        });
    };
})(jQuery);

Image/banner rotator

jquery

jQuery