Anleitung: Ein Karussell mit Javascript entwickeln

Ein Karussell bietet eine schnelle Möglichkeit, viele unterschiedliche Inhalte zu präsentieren, wobei man normalerweise einen Kompromiss eingehen muss zwischen der Rotationsgeschwindigkeit und der Möglichkeit, nicht nur die Überschrift, sondern den ganzen Text lesen zu können. Also braucht man Links zur Navigation.

Zur Optimierung fügt man ein <div>-Element für die Navigationslinks hinzu, mit denen man jede der vier Storys direkt aufrufen kann. Außerdem gibt es Vor- und Zurück-Links, mit denen man die Anzeige des Karussells steuern kann.

Hier der HTML-Code für die Navigation, der vor dem schließenden <body>-Tag eingefügt wird.


Damit das Karussell funktioniert und einer Flash-Variante ähnelt, benötigt man noch weitere Javascript-Funktionen:


Alles nichts Besonderes, aber notwendig. Nun muss auch die Funktion rotateDiv geändert werden, damit sie weiß, welche Story gerade angezeigt wird. Hier der entsprechende Code:


Außerdem gibt es einige neue Styles, die dem Stylesheet hinzugefügt werden müssen:


Damit sind alle Funktionen für das einfache Karussell vorhanden. Den vollständigen Code bis zu diesem Stadium kann man sich hier anzeigen lassen.

Themenseiten: Software, Webentwicklung

Fanden Sie diesen Artikel nützlich?
Content Loading ...
Whitepaper

Artikel empfehlen:

Neueste Kommentare 

Noch keine Kommentare zu Anleitung: Ein Karussell mit Javascript entwickeln

Kommentar hinzufügen

Kommentare sind bei diesem Artikel deaktiviert.