Bilder-Karussell mit JavaScript

[mike913]

Hallo, ins Forum,

ich möchte ein sogenanntes Bilderkarussell erstellen. Eine Bilderreihe (Bilder sind horizontal angeordnet) soll sich von links nach rechts innerhalb eines Div-Containers aus dem Bild bewegen. Neue Bilder sollen nachrücken.

Hier ein Link, wie das Ganze konkret aussehen soll.

----Unten im Footer ist das Karussell---

Das "Bilder-Karussell" soll mit JavaScript umgesetz werden.
Ich habe bereits ein paar Vorlagen gefunden, diese benötigen alle jQuery.

Kann man nicht selbst einfach mit ein paar Zeilen Code in JavaScript so ein "Bilder-Karussell" umsetzten?

Hier mein Grundgerüst...

HTML
<div id="container">
<ul>
<li><img src="bild1.png" width="100" height="92"></li>
<li><img src="bild2.png" width="100" height="52"></li>
<li><img src="bild3.png" width="100" height="108"></li>
<li><img src="bild4.png" width="100" height="124"></li>
<li><img src="bild5.png" width="100" height="100"></li>
</ul>
</div>

CSS
#container{width:900px;
border-style:solid;
border-width:1px;
border-color:#000000;}

#container ul{list-style-type:none;}

#container li{display:inline;
padding-left:20px;}

Vielleicht kann mir einer helfen, was der nächste Schritt mit JavaScript wäre, um die Bilder in "Bewegung" zu bringen.

Gruß

 

[leveler]

AW: Bilder-Karussell mit JavaScript

Kann man nicht selbst einfach mit ein paar Zeilen Code in JavaScript so ein "Bilder-Karussell" umsetzten?

Klar, kann man. Ob das für Dich einfach ist, weiss von uns hier niemand. Guck Dir das bestehende Beispiel halt genau an und bau es nach/ modifiziere es. Die Anleitung liegt ja im Quelltext der Seite vor.

 

[Duddle]

AW: Bilder-Karussell mit JavaScript

Vielleicht kann mir einer helfen, was der nächste Schritt mit JavaScript wäre, um die Bilder in "Bewegung" zu bringen.

Die Grundidee ist, Eigenschaften zu modifizieren die die Position des Bildes definieren. Machst du das in rascher Folge, "bewegt" sich das Ding. Ausführlicher und mit Beispiel erklärt das SELFHTML hier: http://aktuell.de.selfhtml.org/artikel/javascript/fader-framework/animieren.htm

Die Probleme beginnen dann mit der Browserkompatibilität der eingesetzten Methoden und so weiter. Deshalb ist unter anderem jQuery so beliebt, es verbirgt die Tricks und Kniffe hinter einem schlichten Interface.


Duddle