jQuery – 8 – Bannerrotation, zufällig

Ein kleiner, sehr simpler Bannerwechsler. Ziel war es, daß bei jedem Reload der Seite ein zufälliges Banner eingeblendet wird und diese dann mit einem kleinen FadeIn/FadeOut Effekt munter vor sich her rotiert .. natürlich unobtrusive .. und barrierefrei 🙂

Hier ist das Beispiel zu finden

Das ganze hört sich jetzt nicht sonderlich kompliziert an .. allerdings muss man sich kurz mit der Erzeugung von ganzzahligen Zufallszahlen beschäftigen und die Modulo-Division hilft einem auch immens weiter.

Aber erst mal zum CSS File .. hier muss man drauf achten das die img Tags absolut positioniert werden .. da es sonst einen kleinen optischen Nebeneffekt gibt (probierts aus) .. ihr könnt aber das Elternelement gerne wieder relative setzen.

Das Javascript / jQuery:

$(document).ready(function(){
  countImages = $("#banner img").hide().size(); 
  currentImage = Math.floor(Math.random()*countImages);
  $("#banner img:eq("+currentImage+")").show();
  setInterval(rotate, 3500);
});
function rotate() {
  oldImage = currentImage%countImages;
  newImage = ++currentImage%countImages;
  $("#banner img:eq(" + newImage + ")").fadeIn("slow", function() {
    $("#banner img:eq(" + oldImage + ")").fadeOut("slow");
  });
}

countImages zählt sämtliche img Tags unter Banner durch und setzt sie display:none;
currentImage erzeugt eine ganzzahlige Zufallszahl kleiner gleich der Anzahl von img Tags.

Dann wird anhand der Zufallszahl ein img Tag ausgewählt und angezeigt. (:eq Selektor).

Wir starten ein Interval das die Funktion rotate alle 3,5 Sekunden ausführt.

Es folgen die zwei Modulo Divisionen .. diese liefern immer nur den Rest Wert. Also wenn currentImage = 3 und countImages = 4 ergibt das 0 REST 3 .. welches das aktuelle Bild ist das zufällig angezeigt wird.

Die zweite Division erhöht currentImage um 1 .. dividiert und erhält das folgende Bild .. kompliziert? .. aber notwendig .. wir müssen ja nachdem das letzte Bild (4) angezeigt wurde wieder von vorne .. beim ersten Bild (0) beginnen .. und 4 geteilt durch 4 ist 1 REST 0 🙂

Zum Schluss dann noch das ein und ausblenden ..

Hier nochmal das Beispiel der Bannerrotation zum nachmachen.

Update 01.06.2011 – Erste Revision

Nach dem Kommentar von Christoph .. die erste Überarbeitung:

$(function(){
  var bannerImg = $("#banner");
  var countImages = bannerImg.children().hide().size();
  var currentImage = Math.floor(Math.random()*countImages); 
  bannerImg.children(":eq("+currentImage+")").show();
  setInterval(function() {
    var oldImage = currentImage%countImages;
    var newImage = ++currentImage%countImages; 
    bannerImg.children(":eq(" + newImage + ")").fadeIn("slow", function() {
      bannerImg.children(":eq(" + oldImage + ")").fadeOut("slow");
    });
  }, 3500);
});

Die globalen Variablen habe ich in lokale umgewandelt .. das DOM Element Banner wird nun nur noch einmal selektiert und dann als Variable durchgereicht.

Update 02.06.2011 – Zweite Revision

$(function() {
  var bannerImg = $('#banner');
  bannerImg.children(':eq(' + ~~(Math.random() * bannerImg.children().hide().size()) + ')').show();
  setInterval(function() {
    var current = bannerImg.children(':visible').fadeOut();
    if (current.next().length > 0) {
      current.next().fadeIn();
    } else {
      bannerImg.children(':first').fadeIn();
    }
  }, 3000);
});

So .. nun habe ich auch den Delay beim Übergang vom letzten auf das erste Bild eliminiert .. es ist sicher etwas besser lesbar als Christophs Variante .. den Unterschied zwischen Math.floor und den zwei “~~” glaub ich jetzt einfach mal und das Beispiel habe ich auch auf den neusten Stand gebracht ..

Leave a Reply

Your email address will not be published. Required fields are marked *