jQuery tutorial: image rotator

In deze jQuery tutorial zal ik uitleggen hoe je een image rotator kan maken met behulp van jQuery.

jQuery Noobtutorials.nl PHP MYSQL

De HTML code kan op verschillende manieren opgebouwd worden. In dit voorbeeld maak ik gebruik van een DIV element waarbij de afbeeldingen inclusief links worden geplaatst. De HTML code komt er dan als volgt uit te zien:

  1. <div class="imagesrotator">
  2.         <a href="http://www.jquery.com">
  3.                 <img src="images/jquery.png" alt="jQuery" />
  4.         </a>
  5.         <a href="http://www.noobtutorials.nl">
  6.                 <img src="images/noobtutorials.png" alt="Noobtutorials.nl" />
  7.         </a>
  8.         <a href="http://www.php.net">
  9.                 <img src="images/php.png" alt="PHP" />
  10.         </a>
  11.         <a href="http://www.mysql.com">
  12.                 <img src="images/mysql.png" alt="MYSQL" />
  13.         </a>
  14. </div>

Om ervoor te zorgen dat er elke keer een nieuwe afbeelding getoond wordt zal ik gebruik maken van setInterval. Deze werkt bijna hetzelfde als setTimeOut, met het cruciale verschil dat bij setInterval de actie herhaald wordt totdat de inteval gewist wordt. De setInterval heeft 2 waardes nodig: De functie die uitgevoerd wordt, en de tijd tussen de intervallen. Deze tijd dient in miliseconden te zijn. 3000 miliseconden is 3 seconden.

De code begint met het selecteren van de afbeeldingen die niet zichtbaar zijn. Ik selecteer met de code :not(:first) alle elementen die niet het eerste element zijn. Deze elementen worden vervolgens met behulp van .hide(). In de volgende regel voeg ik aan het eerste element de class current toe. Aan de hand van deze class kan ik zien welke afbeelding op dat moment getoond wordt. Hiervoor gebruik ik addClass en removeClass.

  1. $("div.imagesrotator a:not(:first)").hide()
  2. $("div.imagesrotator a:first").addClass("current");

Op de eerste regel van de inteval functie selecteer ik het active element, welke de class current heeft meegekregen. Op de volgende regel controleer ik hoeveel elementen er geselecteerd zijn. Is dat 0, dan betekent dat dat er geen elementen geselecteerd zijn. De regel die daarna volgt zorgt ervoor dat het eerste element geselecteerd wordt wanneer er bij de vorige selectie geen elementen geselecteerd zijn.

  1. var $active = $("div.imagesrotator a.current");
  2.                
  3. if($active.length == 0)
  4.         $active = $("div.imagesrotator a:first");

De hierop volgende regel is nogal aparte. Dit is namelijk een verkorte if/else, ook wel een shorthand if/else genoemd. Voor het ? is het if gedeelte, na het ? gedeelte is het gedeelte dat wordt uitgevoerd wanneer de if/else true is. Het gedeelte na de : wordt uitgevoerd wanneer de if/else false is. In deze shorthand if/else wordt hetzelfde truucje uitgehaald als met de active variabele. Ook bij deze variabele wordt gekeken hoelang deze is. Wanneer deze een lengte van 0 heeft betekent dat er geen afbeeldingen meer zijn. Om deze reden wordt het eerste element geselecteerd en herhaalt het hele kunstje zich opnieuw.

  1. $next = $active.next().length ? $active.next() : $("div.imagesrotator a:first");

In de laatste 2 regels wordt de overgang pas echt geregeld. Het element welke is opgeslagen in $active wordt onzichtbaar gemaakt met behulp van fadeOut. Ook wordt de current class verwijderd zodat in de volgende cyclus deze wordt geselecteerd. Het element welke is opgeslagen in $next wordt zichtbaar gemaakt met behulp van fadeIn. Door de class current mee te geven, is in de volgende cyclus te zien welk element actief is.

  1. $active.removeClass("current").fadeOut('slow');
  2. $next.addClass("current").fadeIn('slow');

Als bijlage heb ik een volledig werkend voorbeeld bijgevoegd. Reacties op deze tutorial worden gewaardeerd

BijlageGrootte
image-rotator.zip110.41 KB