banner slider

jquery.bannerslider.js

// bannerSlider, Version 1
// Copyright (c) July 30, 2011 adardesign.com
// bannerSlider 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
// Added relToSrc performance....
(function ($) {
    $.fn.bannerSlider = function (options) {
        var defaults = {
            buildNav: function (count) {
                var i = 0,
                    container = $("<div class='controlsContainer'>").hide(),
                    navElements = "",
                    countWidh = 22;
                for (i = 0; i < count; i++) {
                    navElements += "<span class='slideControl directToBanner'></span>";
                }
                container.html(navElements).css("margin-left", "-" + count * countWidh);
                return container;
            },
            runAutomatic: true,
            interval: 5000,
            normalSpeed: 1000,
            fastSpeed: 300,
            clearIntarval: function (id) {}
        };
        var options = $.extend(defaults, options);
        return this.each(function (i, el) {
            var bannerContainer = $(el),
                bannerBelt = bannerContainer.find(".bannerSliderBelt"),
                banners = bannerBelt.children(),
                bannersLength = banners.length,
                bannerWidth = banners.eq(0).width(),
                bannerNavCount = bannerContainer.append((options.buildNav(bannersLength).fadeIn(options.fastSpeed))).find(".controlsContainer span").eq(0).addClass("active").end(),
                beltPos = 0,
                //animate belt
                animSpeed = 500,
                activeBanner, animateBelt = function (dir) {
                    var posNegValue = dir === "left" ? "-" : "+",
                        animTo = function () {
                            var animToVal;
                            if (dir === "left") {
                                if (beltPos === 0) {
                                    animToVal = "-=" + bannerWidth * (bannersLength - 1);
                                    animSpeed = options.fastSpeed;
                                    bannerNavCount
                                }
                                if (beltPos < 0) {
                                    animToVal = "+=" + bannerWidth;
                                    animSpeed = options.normalSpeed;
                                }
                            }
                            if (dir === "right") {
                                if (Math.abs(beltPos) > bannerWidth * (bannersLength - 2)) {
                                    animToVal = 0;
                                    animSpeed = options.fastSpeed;
                                } else {
                                    animToVal = "-=" + bannerWidth;
                                    animSpeed = options.normalSpeed;
                                }
                            }
                            if (typeof dir === "number") {
                                if (dir === 0) {
                                    animToVal = dir;
                                } else if (dir === bannersLength) {
                                    animToVal = "-" + bannerWidth * (bannersLength - 2);
                                    alert("wwww")
                                } else {
                                    animToVal = "-" + bannerWidth * dir
                                }
                            }
                            return animToVal;
                        }
                    animProperties = {
                        left: animTo() + "px"
                    }
                    bannerBelt.animate(animProperties, animSpeed, function () {
                        updateValues(dir);
                    });
                },
                updateValues = function (dir) {
                    beltPos = parseInt(bannerContainer.find(".bannerSliderBelt").css("left"), 10);
                    updateActiveNav();
                    toggleEnableControll("enable");
                },
                toggleEnableControll = function (action) {
                    var action = action === "disable" ? "addClass" : "removeClass";
                    bannerContainer.find(".slideControl")[action]("disabledControl");
                },
                updateActiveNav = function () {
                    bannerContainer.find(".controlsContainer span").eq(Math.abs(beltPos) / bannerWidth).addClass("active").siblings().removeClass("active");
                }
            	bannerBelt.width(bannerWidth * bannersLength);
            	bannerContainer.delegate(".slideControl", "click", function () {
                	var thisEle = $(this)
					if (thisEle.hasClass("disabledControl")) {
						return
					}
					toggleEnableControll("disable");
					if (thisEle.hasClass("directToBanner")) {
						var index = bannerNavCount.index(thisEle);
						animateBelt(index);
						return
					}
					if (thisEle.is(".bannerSliderArrowRight")) {
						animateBelt("right");
						return
					} else if (thisEle.is(".bannerSliderArrowLeft")) {
						animateBelt("left");
					}
            })
            if (options.runAutomatic) {
                var simulateClick = function () {
                        bannerContainer.find(".bannerSliderArrowRight").trigger("click");
                    };
                var intervalID, startInterval = function () {
                        intervalID = setInterval(simulateClick, options.interval);
                    }
                startInterval();
                bannerContainer.hover(

                function () {
                    clearInterval(intervalID)
                }, function () {
                    startInterval();
                })
            }
        });
    };
})(jQuery);