JQuery Basic Rotator Plugin

by Taufik Nurrohman

HTML

<div class="slide">
    <div>Lorem</div>
    <div>Ipsum</div>
    <div>Dolor</div>
    <div>Sit</div>
    <div>Amet</div>
</div>

<div class="foo">
    <div>Lorem</div>
    <div>Ipsum</div>
    <div>Dolor</div>
    <div>Sit</div>
    <div>Amet</div>
</div>

<div class="tada">
    <div>Lorem</div>
    <div>Ipsum</div>
    <div>Dolor</div>
    <div>Sit</div>
    <div>Amet</div>
</div>

CSS

body {
  padding:50px;  
}

.rotator {
  background-color:#7CDEE0;
  font:bold 14px Verdana,Arial,Sans-Serif;
  color:#2964AF;
  position:relative;
  width:120px;
  height:30px;
  margin:10px auto;
}

.rotator .item {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  line-height:30px;
  padding:0 15px;
}

JavaScript

(function($) {
    $.fn.rotator = function(settings) {
        settings = jQuery.extend({
            interval: 3000,
            speed: 1000
        }, settings);

        return this.each(function() {
            var $t = $(this),
                $item = $t.children().addClass('item').hide();

            $t.addClass('rotator');

            if ($item.length > 1) {
                $item.first().addClass('current').fadeIn(settings.speed);
                setInterval(function() {
                    var c = $t.find('.current');
                    if (c.next().length === 0) {
                        c.removeClass('current').fadeOut(settings.speed);
                        $item.first().addClass('current').fadeIn(settings.speed);
                    } else {
                        c.removeClass('current').fadeOut(settings.speed).next().addClass('current').fadeIn(settings.speed);
                    }
                }, settings.interval);
            }
        });
    };
})(jQuery);

// Execute here!
$(function() {
    $('.slide').rotator();
    $('.foo').rotator({speed:2000});
    $('.tada').rotator({speed:400,interval:1000});
});