einfache Bilder-Slideshow mit JS

[RobinS]

Hallo Leute,

nach langer Suche bei Google und in diversen Foren bin ich immer noch nicht fündig geworden.
ich suche eine simple Bilder-Slideshow mit JS oder auch JQuery, die folgende Vorraussetzungen erfüllen soll:

Ich möchte eine beliebige Anzahl von Bildern nebeneinander auf einer Leiste platzieren. 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. Diese Bilder sollen nun automatisch (also ohne MouseOverEffekt oder Ählichem) schlicht von rechts nach links "durchlaufen", soweit kein Problem. 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.

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

Vielen Dank im Vorraus
Gruß Robin

[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.

[RobinS]

Hallo Felix,

erst einmal danke, für deine ausführliche Hilfe.

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

Nein, hab ich noch nicht. Aber bis dahin hätte ich schon selber Ideen gehabt, für die mögliche Umsetzung.

Nochmals vielen Dank. Ich werde deinen Vorschlag versuchen und mich dann melden ob es geklappt hat oder weitere Probleme aufgetreten sind.

Gruß Robin

[Felix Riesterer]

Lieber RobinS,

Nochmals vielen Dank. Ich werde deinen Vorschlag versuchen und mich dann melden ob es geklappt hat oder weitere Probleme aufgetreten sind.

OK, dann können wir unsere Lösungen ja einmal vergleichen!

Liebe Grüße,

Felix Riesterer.