Simple collection rotator for slideshows, quotes, etc.

rotator_builder.js

(function() {

  jQuery(function() {
    var looper, rotator_builder;
    rotator_builder = function(selector, args) {
      var $items, cur, loop_fn, num_items, prev, show_dur, trans_in, trans_in_dur, trans_out, trans_out_dur;
      trans_in = args.trans_in || "fadeIn";
      trans_out = args.trans_out || "fadeOut";
      trans_in_dur = args.trans_in_dur || 1000;
      trans_out_dur = args.trans_out_dur || 400;
      show_dur = args.show_dur || 7000;
      $items = $(selector);
      num_items = $items.length;
      cur = 0;
      prev = num_items - 1;
      loop_fn = function() {
        cur %= num_items;
        prev %= num_items;
        $($items[prev])[trans_out](trans_out_dur);
        $($items[cur]).delay(trans_out_dur + 50)[trans_in](trans_in_dur);
        // need that +50 to make sure there's no overlap and the prev item is completely gone
        
        cur++;
        prev++;
        return setTimeout(loop_fn, show_dur);
      };
      return loop_fn;
    };


    //////////////////////////////////////////
    // Example
    looper = rotator_builder("#stuff li", {
      trans_in: "fadeIn",
      trans_out: "fadeOut",
      trans_in_dur: 1000,
      trans_out_dur: 400,
      show_dur: 7000
    });
    return looper();
  
  });

}).call(this);