JavaScript Slideshow

[Felix Riesterer]

Lieber User123,

wenn es um Image-Slider geht, stellt sich für mich immer die Frage, welches DOM wollen wir haben und was davon soll JavaScript generieren. Wie universell soll das JavaScript sein und woher soll es wissen, was es zu tun hat?

Ich habe von Jquery gebrauch gemacht.

Das ist nur ein Werkzeug. Damit kann man tolle Sachen machen. Lies "toll" sowohl im Sinne von "beeindruckend" als auch im Sinne von "Tollwut".

Aktuell manipulierst Du Elemente mit passenden ID-Bezeichnern, indem Du jQuery-Methoden (.hide(), .show(), .fadeIn() und fadeOut()) darauf ansetzt. Das kann man schon so machen, aber dann ist es halt nicht gut. Es tut was es soll, aber eben nur das. Will man es später einmal für etwas anderes einsetzen, ist es kaum mehr verständlich und muss ohnehin umgebaut oder besser ganz von vorne gebaut werden.

Jetzt habe ich Folgendes problem: Beim ersten Durchlauf der Slideshow ist das Foto zu lange eingeblendet.

Das ist eine unmittelbare Folge davon, dass Du noch am Anfang des Erfahrungsgewinns stehst. Du überblickst noch nicht alles, was Du da zusammengeschraubt hast.

Javascript rechnet offenbar das "set Timeout" und "set interval" zusammen. Kennt jemand eine Lösung?

Die Zeitliche Abfolge von Arbeitsschritten solltest Du irgendwie schematisch erfassen, damit Du weißt, was Du wie in Code fassen willst. Das kann so aussehen:

1. schalte Bild 1 auf undurchsichtig (opaque)
2. warte eine Zeit von x
3. schalte Bild 2 auf undurchsichtig und Bild 1 auf durchsichtig
4. warte eine Zeit von x
5. ...?

Diese Punkte können nicht in einer Schleife stehen, weil es in JavaScript keine Möglichkeit gibt, die Abarbeitung innerhalb des Codes anzuhalten. Deswegen behilft man sich mit zyklischen Aufrufen, die timer-gesteuert sind (Dein setInterval ist so ein Kandidat). Die zyklisch aufgerufene Funktion ermittelt dann, welchen Schritt dieser Liste sie gerade ausführen soll. Die Schritte 2 und 4 sind dann die Momente, in denen die Funktion sich beendet, um auf einen erneuten per setInterval ausgelösten Aufruf zu warten.

Der Unterschied zwischen setTimeout und setInterval ist der, dass ersteres nur einen einzigen Aufruf auslöst, zweiteres dagegen wie ein Uhrwerk ständig Aufrufe erzeugt, bis man entweder die Seite wechselt, oder per JavaScript das Intervall wieder abstellt. Für einen automatischen Bildwechsler bietet sich daher zweiteres eher an.

Liebe Grüße

Felix Riesterer