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

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($);

⇒