Friday, March 23, 2012

jQuery simple banner rotator plugin

Today I had a task, to create a simple image (banner) rotator in Javascript...so I thought: If I have to do it, then do it right and created a simple jQuery plugin. The code is really easy to understand... here is the essence of it:


setInterval(function () {
 var items = jQuery( jQuery(options.items, this).get().reverse());

 items.each(function () {
  // if visible, than hide
  if (jQuery(this).is(":visible")) {
   jQuery(this).fadeOut();

   return false;
  } 
 });

 // if nothing more to hide, show all
 if( jQuery(":visible", items).length <= 1 ) items.fadeIn();

}, options.timeout);


Basically there is an interval and it's hiding all the items backwards. When they are all hidden, then show them. Because the items are positionated "absolute" they are overlapping eachother. So when I hide one, another appears.


That's it. Simple and small! :)



Here is the full code:
jQuery.bannerRotate.js

Cheers,
Phil