Einfacher Bilder Slider mit jQuery

Mit jQuery gibt es die Möglichkeit mit wenig Aufwand einen automatischen Bilder Slider für eine Webseite zu bauen. Im folgenden Artikel wird kurz ein einfacher Slider auf Basis von Img Tags mit jQuery und eines kleinen Javascript Codes aufgebaut.

Ein Beispiel für den Slider gibt es hier: Demo

Download jQuery

uerst wird die jQuery Javascript Bibliothek benötigt, die direkt von der Startseite der jQuery Homepage ( http://jquery.com/ ) heruntergeladen werden kann.

Bilder

Für den Slider sind drei gleich große Bilder notwendig. In dem Demo werden drei Bilder mit der Größe von 800 Pixel x 307 Pixel verwendet. Die Bilder befinden sich in einem Unterverzeichnis Namens: ( images/ )

HTML Dokument

index.html

Das kleine HTML Dokument lädt drei Bilder, sowie die jQuery Javascript Datei. Somit passiert noch nicht wirklich viel, wenn das HTML Dokument in einem Browser geöffnet wird.

Javascript

Der Javascript Code wird wie folgt aufgebaut.

1. Javascript Code erst starten, wenn das HTML Dokument geladen ist. Dazu wird die nachfolgende Anweisung verwendet. Der Code, der ausgeführt werden soll, wird in die geschweiften Klammern nach function() gesetzt.

2. Innerhalb der Funktion werden alle Img Tags in dem Div Tags mit der ID Slider in den Hintergrund gesetzt.

3. Gleich darauf wird der erste Img Tag von div#slider mit .first() ausgewählt und mittels .show() angezeigt.

Bedeutet das jetzt an dieser Stelle nur das erste Bild von den Bildern angezeigt wird, weil die anderen mit .hide() ausgeblendet wurden.

4. Das erste Bild wird somit angezeigt, das bedeutet, dass für die nachfolgende Schleife mit dem nächsten Bild begonnen werden sollte. Deshalb wird das aktuelle Element auf den Index des nächsten Img Tags gesetzt. Dazu werden die jQuery Effekte .first(), .next() und .index() genutzt.

5. Um innerhalb der Slider Schleife zu erkennen, wann wieder bei dem ersten Bild begonnen werden muss, ist es notwendig sich ebenfalls den Index des letzten Bildes zu merken. Dies funktioniert mit .last() und .index().

6. Die Schleife wird mit der Javascript Methode setInterval() durchgeführt.

6.1. In setInterval werden wieder alle Img Tags von div#slider in den hintergrund befördert.

6.2. Und anschließend wird der Img Tag von div#slider angezeigt, welcher gleich dem aktuellen Element aus currentItem ist. Für den Vergleich des Index wird der jQuery Effekt .eq() verwendet.

6.3. Abschließend ist in der Schleife noch das aktuelle Element (currentItem) auf das nächste Element zu setzen oder auf das erste Element, sobald der letzte Img Tag erreicht wurde. Dies kann mit einem einfachen IF-Statement abgebildet werden.

Vollständiger Javascript Code

Der folgende Javascript Code enthält alle Code Schnipsel für den automatischen Slider. Der Code muss einfach zwischen den <head> Tags eingefügt werden.

CSS Layout

Für eine schönere Ansicht kann noch folgender CSS Code innerhalb der <head>Tags eingefügt werden.

 

(Visited 387 times, 1 visits today)

2 Comments Einfacher Bilder Slider mit jQuery

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.