Categories: Software

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.

Page: 1 2 3 4 5 6

ZDNet.de Redaktion

Recent Posts

So günstig & effizient war Content Produktion noch nie: Neues Content System erobert deutschen Markt

Kontinuierliche Content Produktion und Markenaufbau sind essentieller Pfeiler von langfristigen Unternehmenserfolg. Das ist mittlerweile auch…

4 Tagen ago

Lenovo übertrifft die Erwartungen und hebt Prognose an

KI-Funktionen beschleunigen die Erholung des PC-Markts. Der Nettogewinn legt um 44 Prozent zu, der Umsatz…

4 Tagen ago

Bedrohungsakteure betten Malware in macOS-Flutter-Anwendungen ein

Googles App-Entwickler-Kit dient der Tarnung des schädlichen Codes. Der Sicherheitsanbieter Jamf hält die Schadsoftware für…

4 Tagen ago

CopyRhadamantys greift weltweit Unternehmen an

Ausgeklügelte Phishing-Kampagne verwendet eine weiterentwickelte Version der Rhadamanthys-Stealer-Malware.

1 Woche ago

Facebook Marketplace: EU verhängt Geldbuße von fast 800 Millionen Euro gegen Meta

Die EU-Kommission kritisiert die Verknüpfung von Facebook und dem hauseigenen Online-Kleinanzeigendienst. Sie sieht darin einen…

1 Woche ago

Umfrage: Angestellte in Deutschland unterschätzen NIS-2-Richtlinie

Fast zwei Drittel halten jedoch eine Umsetzung aller Vorgaben von NIS 2 bis Jahresende für…

1 Woche ago