/ Published in: jQuery
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
// 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);