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.

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

Schreibe einen Kommentar

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