Categories: Software

Anleitung: Ein Karussell mit Javascript entwickeln

Das entscheidende Merkmal eines Karussells ist der rotierende Content. Um diesen Effekt zu erzielen, braucht man nur ein paar einfache CSS-Tricks anzuwenden, welche die <div>-Elemente anzuzeigen und zu verbergen. Hierzu dient der folgende Code:

In den Body-Tag ist Folgendes einzutragen:


<body  onload="autorot()">

Wenn die Seite geladen wird, ruft sie die Funktion autorot auf, die wiederum die Funktion showNext aufruft und dann einen Timeout setzt, der sich selbst nach 3,5 Sekunden erneut aufruft. Auf diese Weise bleibt das Karussell in Bewegung.

Die Methode showNext legt nur fest, welche Story angezeigt werden soll, und übergibt diese an die Funktion rotateDiv, wo die eigentliche Action stattfindet. rotateDiv sucht alle <div>-Elemente, die Kinder des storyContainer->div< sind, und setzt ihre style.display-Variable auf "none", sofern es sich nicht um die anzuzeigende Story handelt. In diesem Fall wird der Wert auf "block" gesetzt.

Damit hat man ein funktionierendes Karussell, das aber weder besonders schön noch benutzerfreundlich ist. Das soll nun geändert werden.

Page: 1 2 3 4 5 6

ZDNet.de Redaktion

Recent Posts

Digitale Produkte „cyberfit“ machen

Vernetzte Produkte müssen laut Cyber Resilience Act über Möglichkeiten zur Datenverschlüsselung und Zugangsverwaltung verfügen.

2 Tagen ago

Google schließt schwerwiegende Sicherheitslücken in Chrome 131

Das jüngste Update für Windows, macOS und Linux stopft drei Löcher. Eine Anfälligkeit setzt Nutzer…

3 Tagen ago

Apple schließt Zero-Day-Lücken in iOS, iPadOS und macOS

Zwei von Google-Mitarbeitern entdeckte Schwachstellen werden bereits aktiv gegen Mac-Systeme mit Intel-Prozessoren eingesetzt. Sie erlauben…

3 Tagen ago

Gefährliche Anzeigen für Passwortmanager Bitwarden verbreiten Malware

Die Hintermänner haben es unter anderem auf Daten von Facebook-Geschäftskonten abgesehen. Opfer werden über angebliche…

3 Tagen ago

Public Cloud: Gartner erwartet 2025 weltweite Ausgaben von 723 Milliarden Dollar

Bis 2027 werden 90 Prozent der Unternehmen eine Hybrid-Cloud-Strategie umsetzen.

4 Tagen ago

iPhone 15 ist bestverkauftes Smartphone im dritten Quartal

Apple belegt in der Statistik von Counterpoint die ersten drei Plätze. Samsungs Galaxy S24 schafft…

4 Tagen ago