einfache Bilder-Slideshow mit JS

[Felix Riesterer]

Lieber RobinS,

Ich möchte eine beliebige Anzahl von Bildern nebeneinander auf einer Leiste platzieren.

Also in etwa sowas:

<p class="slideshow">  
    <span>  
        <img alt="Bild1" src="..." />  
        <img alt="Bild2" src="..." />  
...  
        <img alt="Bildx" src="..." />  
    </span>  
</p>

Diese Bilder sollen insgesamt breiter sein, als der Container, der Sie beinhaltet. Bsp. ein div mit Breite 500px, auf dem 10 Bilder mit Breite 100px sind.

Das ist eine Aufgabe, die man mit CSS prima lösen kann. Stichwort: http://de.selfhtml.org/css/eigenschaften/positionierung.htm#overflow@title=overflow

Diese Bilder sollen nun automatisch (also ohne MouseOverEffekt oder Ählichem) schlicht von rechts nach links "durchlaufen", soweit kein Problem.

Ach. bis hierher hast Du schon alles nach Wunsch umgesetzt? Zeig her!

Wenn ich nun beim letzten Bild angekommen bin, soll wieder das erste Bild nach dem Letzten erscheinen, ohne, dass die Seite neu geladen werden muss oder die restlichen Bilder wieder verschwinden.

Klar.

Hat da jemand ne Idee für die Umsetzung oder vielleicht sogar schon was Fertiges?

Ich dachte, dass Du mit negativem http://de.selfhtml.org/css/eigenschaften/randabstand.htm#margin_left@title=margin arbeitest, der per JavaScript zeitgesteuert negativ vergrößert wird und dafür sorgt, dass die Bilder sich eben nach links bewegen. Du kannst ja die Bilder in ihrem Container-Element (in meinem Code oben wäre das das <span>-Element) in ihrer Reihenfolge tauschen, sodass ein Bild, das aus dem sichtbaren Bereich verschwunden ist (wenn also der Wert des Margin mit der <http://de.selfhtml.org/javascript/objekte/images.htm#width@title=Breite des Bildes> zusammen wieder null ergibt), automatisch hinten an die Kette der http://de.selfhtml.org/javascript/objekte/node.htm#child_nodes@title=childNodes wieder http://de.selfhtml.org/javascript/objekte/node.htm#append_child@title=angehängt wird. Den sich ständig ins Negative vergrößernde margin kannst Du dann ja wieder auf 0 zurücksetzen.

Beachte, dass Leute ohne JavaScript wahrscheinlich nur einen Ausschnitt Deiner Bilder zu sehen bekommen werden!

Liebe Grüße,

Felix Riesterer.