Example #11: change the banner randomly in an interval loop

Given that you have a method which selects any element from the current jQuery set randomly,
e.g.
$.fn.random = function(){ return this.eq(
  Math.floor(Math.random()*this.length)) }
,
then you can use that to build a banner rotator very easily.

In this example there are four different banners. Every 5 seconds another one fades in, randomly chosen.

As we don't want to wait for the animations finishing we use the original version of .fadeIn() and .fadeOut() here.

$('#banners > *').hide().repeat(5000,true)
   .fadeOut(1000).siblings().random().fadeIn(1000)
.until($);

Some banner text?
some more text here

Some other cool stuff?
this is other text

Even different text
this is new text

Attention!
cheaper, cheaper, cheaper…

Other examples with animations

Other examples with closed loops

Other examples with intervals

Other examples with repeat-loops