Diashow mit JavaScript

von Thomas Salvador.

Dieser Artikel liefert eine allgemeine Diashow, die mit Hilfe von JavaScript realisiert wird. Die Routine eignet sich, um z.B. zyklisch Banner, Button oder Fotos darzustellen.

Der Source
Die Dokumentation
Der Rahmen
Das Beispiel

Der Source

<script type="text/javascript"><!--

var fotos=new Array(
  '/images/bb-button.gif',
  '/images/bb-button2.gif',
  '/images/bb-button3.gif',
  '/images/wd-button.gif'
);

var speed=5000;
var pos=0;

function doit() {

// Diashow-Script von Thomas Salvador, 1999, brauchbar.de
// Freeware. Nutzung erlaubt, solange diese Copyrightmeldung
// unveraendert erhalten bleibt.

if (!(document.images)) {return;}

 document.bild.src=fotos[pos++];

 if (pos == fotos.length) { pos = 0; }
 setTimeout("doit();",speed);
}
//-->
</script>

Die Dokumentation

Obiges Script gehört in den head-Bereich der HTML-Datei.

fotos ist ein Feld von URLs zu Bildern. Diese werden zyklisch dargestellt. Die Länge der Pause wird mit speed in Millisekunden eingestellt.

Beachten Sie bitte, dass es bei ersten Aufruf eines Bildes freilich zu einer weiteren Verzögerung kommt, die durch den Ladevorgang bedingt ist.

Danach kommt das Bild aus dem Cache.

Die Funktion doit() wird mit Hilfe von setTimeout() periodisch angestoßen.

Bei jedem Aufruf wird das neue Bild geladen document.bild.src=... und der Zeiger auf das aktuell dargestellte Bild pos erhöht.

Wurden alle Bilder dargestellt, wird der Zeiger auf 0 (auf das erste Bild) zurückgesetzt.

Um den Vorgang zu Starten, wird doit durch den onload-Event des body-Tag aufgerufen.

<body ... onload="doit();">

was die Ausführung der Funktion, nach Beendigung des Ladevorgangs impliziert.

Abschließend benötigen wir noch ein in HTML gesetztes Bild, welches die Bilderfolge aufnehmen soll.

Dieses wird zusaätzlich mit Hilfe des name-Attributes des img-Tags benannt (hier: bild). Es empfiehlt sich, ein leeres Bild (hier dummy.gif genannt) vorzuladen, bis das Script startet.

<img src="dummy.gif" name="bild" width="88" height="31" />

Geben Sie die Ausdehnungen Ihrer Bilder an. Alle Bilder der Folge müssen die gleiche Ausdehnung haben, da sie sonst nicht korrekt dargestellt werden.

Der Rahmen

Orientieren Sie sich bitte an folgendem Rahmen für Ihre HTML-Datei.

<html>
<head>
  Titel und Metas usw.
  ... hier das Script ...
</head>
<body ... onload="doit();">
  ... Seiteninhalt ...

  <img src="dummy.gif" name="bild" width="88" height="31" />
</body></html>

Das Beispiel

Das Beispiel auf dieser Seite wechselt alle 5 Sekunden den Button. (Insgesamt sind es vier verschiedene.)

Viel Spaß.