JavaScript jQuery, images nacheinander anzeigen

[Domi83]

Hallo Leute, ich habe mal eine kleine Frage

Ich hatte schon mal ein wenig gesucht, bevor ich baue und verzweifle, aber leider nichts passendes gefunden. Ist es möglich, Images die an einer Position stehen, hintereinander durch schalten / rotieren zu lassen? Mein Plan sieht wie folgt aus, ich habe ein DIV wo Images drin sind...

<div>
 <img src="" />
 <img src="" />
 <img src="" />
 <img src="" />
</div>

Ist es nun möglich mit dieser minimalistischen Version und mit Hilfe von jQuery alle erst einmal hidden zu setzen und dann immer nur eines davon visible zu machen? Das mit hidden und visible ist ja (glaube ich) kein Problem. Eine Klasse erstellen, mit "display: none" und eine mit "display: block" erstellen und dann nur noch die Klasse wechseln lassen.

Aber nun ist halt die Frage ob man sagen kann dass das erste IMG visible sein soll, dann das zweite, dann das dritte etc. unter der Prämisse dieser angaben... Grund der Frage ist folgender, ich habe hier ein CMS mit einem Banner System. Dieses System tut genau all das was es tun soll. Allerdings wurde ich nun gefragt, ob es denn möglich wäre die Banner auch wechseln zu lassen ohne das man F5 drückt. Und da fällt mir dann nur JavaScript / jQuery ein.

Ich habe mir die Banner auch schon mal angeschaut, es sind wirklich nur reine Images mit alt, src und title eingebunden. Keine Klasse oder ID um es zu erleichtern. Darum auch diese Frage

Gruß, Domi

 

[Yuuri]

Wenn du nichts selbst bauen willst, sieh dich einfach mal nach dem Stichwort "Slider" um. Gibts viel zu viele Variationen, um hier alle aufzählen zu können. Teilweise mit durchscrollen, teilweise ist ein Fading drin, teilweise mit Navigation, CSS 3 Animationen uvm.

Um das div anzusprechen, kannst du dir ja mal den CSS-Pfad mit FireBug o.ä. kopieren lassen. Mit entsprechenden Selektoren kann man da ohne weitere Sachen das Element ansprechen (wenn es sich nicht dynamisch an eine Stelle schiebt).

 

[Domi83]

Moin moin.. oder n' abend Das Problem ist ja, ich muss selbst bauen da es ein fertiges Modul in Joomla ist, dass die Banner wiedergibt. Und in den Joomla Foren habe ich auch schon gelesen das es da keine Kombination aus dem Modul + Slider / Rotator gibt und man halt bauen müsste.

Mit FireBug habe ich auch schon herausgefunden das die angezeigten Images halt nur die erwähnten Daten haben. Das einzige was ich nicht weiß ist, wie sage ich jetzt in jQuery $('#div img1'), $('#div img2'), $('#div img3') etc. da hänge ich noch ein wenig fest. Es muss ja erst das erste IMG, dann das zweite, dann das dritte und dann das vierte IMG angezeigt werden.

Hoffe ich konnte das ein wenig passender erklären
Gruß, Domi

 

[SymA]

<div id="image-container">
 <img src="" />
 <img src="" />
 <img src="" />
 <img src="" />
</div>

Dann kannst du mittels $("#image-container").next().show(); das nächste Element einblenden. Musst natürlich das vorherige Element ausblenden und diese Funktionsaufrufe auf einen Event Listener ansetzen z.B. Klick eines Buttons oder über einen Timer steuern. Wäre so ein ganz grober Ansatz