Generic jQuery Rotator

jquery.rotator.js

(function( $ ){

  $.fn.rotateit = function( options ) {  
// 
// Plugin settings with defaults set
// 
// -----------------------------------------------------
    var settings = $.extend( {
        'shownav'       :   true,
        'backnext'      :   false,
        'selector'      :   '.banner',
        'rotate'        :   true,
        'rotatespeed'   :   3,
        'fadespeed'     :   0.2
    }, options);

    return this.each(function() {
        var self = this,
            banners = $(settings['selector'], self),
            nav = $('<nav class="pager" />'),
            backnext = $('<nav class="backnext"><a href="#back" class="back">Back</a><a href="#next" class="next">Next</a></nav>'),
            curbanner = -1,
            maxheight = 0,
            itvshow = 0;

        function _resetanimation() {
            if (settings['rotate'] && (banners.length > 1)) {

                clearInterval(itvshow);                
                itvshow = setInterval(function() {
                    if ($(settings['selector']+'.active', self).next().length > 0) {
                        _setbanner($(settings['selector']+'.active', self).next().data('bannerid'));
                    } else {
                        _setbanner($(settings['selector'], self).filter(':first').data('bannerid'));
                    }
                }, settings['rotatespeed'] * 1000);
            }
        }
// 
// Sets the current banner as visible and fades it in
// 
// -----------------------------------------------------
        function _setbanner(banner) {
            if (curbanner != banner) {
                oldbanner = curbanner,
                    curbanner = banner;
                if (settings['shownav']) {
                    $('a', nav).removeClass('active');
                    $('a.rotateit-banner-btn-'+ banner).addClass('active');
                }
                $(banners).removeClass('active').css({'z-index': 10})
                    .not(':eq(' + oldbanner + ')').hide();
                $('.rotateit-banner-' + banner, self).addClass('active').css({'z-index': 20})
                    .fadeIn(settings['fadespeed'] * 1000, function() {
                        $('.rotateit-banner-' + oldbanner, self).hide();
                    });
            }
        }
// 
// Set up size holder to keep height consistent
// 
// -----------------------------------------------------
        $(banners).wrapAll('<div class="rotateitholder" />');

        banners.each(function(index) {
            var navitem = $('<a />', {
                    'text': (index + 1),
                    'href': '#banner-' + index,
                    'class': 'rotateit-banner-btn-' + index
                }).data('banner', index).on('click.rotator', function(e) {
                    e.preventDefault();
                    _setbanner($(this).index());
                    _resetanimation();
                });
            if ($(this).outerHeight() > maxheight) maxheight = $(this).outerHeight();
            $(this).css({'position': 'absolute','z-index': 10})
                .addClass('rotateit-banner-' + index)
                .data('bannerid', index);

            // console.log($(this).data('bannerid'));
            // console.log($(this));
            if (settings['shownav']) {
                $(nav).append(navitem);
            }
        });
        $('.rotateitholder', self).css({
            'position': 'relative',
            'height': maxheight
        });
        if (banners.length > 1) {
            $(self).append(nav);
            if (settings['backnext']) {
                $('.back', backnext).on('click.rotator', function(e) {
                    e.preventDefault();
                    if ($('.rotateit-banner-' + (curbanner - 1), self).length > 0) {
                        banner = curbanner - 1;
                    } else {
                        banner = banners.length - 1;
                    }
                    _setbanner(banner);
                    _resetanimation();
                });
                $('.next', backnext).on('click.rotator', function(e) {
                    e.preventDefault();
                    if ($('.rotateit-banner-' + (curbanner + 1), self).length > 0) {
                        banner = curbanner + 1;
                    } else {
                        banner = 0;
                    }
                    _setbanner(banner);
                    _resetanimation();
                });
                $(self).append(backnext);
            }
        }
        // console.log(self);
        _setbanner(0);
        _resetanimation();
    });
  };
})( jQuery );