brauchbar.de - WebDesign, Programmierung,Development in HTML, CSS, Javascript, PHP, Perl und mehr

[ Startseite | Artikel : HTML · JavaScript · CSS · Perl · Usability · Sonstiges | Services | Über ]


verwandte Artikel und Seiten

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

<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, http://www.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 Bilder. 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. 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.)

wechselnder Button

Verwandte Artikel und Seiten



brauchbar web
Diese Site anlinken. Artikel zu CSS | HTML | JavaScript | Perl | Usability | Sonst. | nach Ausgabe.

Copyright © 1999-2015 Thomas Salvador und brauchbar.de . Alle Rechte vorbehalten. Gehostet bei all-inkl.
Reproduktion, ganz oder in Teilen, nur mit schriftlicher Zustimmung von Thomas Salvador. Impressum · Datenschutzerklärung · Kontakt.

zum Inhaltsverzeichnis der 10. Ausgabe.

Linken Sie bitte zu der festen Adresse http://www.brauchbar.de/wd/artikel/47.html .