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.
Neueste Kommentare
Noch keine Kommentare zu Anleitung: Ein Karussell mit Javascript entwickeln
Kommentar hinzufügenVielen Dank für Ihren Kommentar.
Ihr Kommentar wurde gespeichert und wartet auf Moderation.