 Bildwechsel 01 automatisch
Eine Grafik mit einem fest zugewiesenen Namen wird angezeigt und mittels JavaScript in einem festgeleten Zeitintervall laufend ersetzt.
 18.04.2007, vereinfachte Wertzuweisung für die Variablen
Zur Demo sehen sie ein Beispiel, bei dem 7 Images im
zeitlichen Abstand von 2 Sekunden angezeigt werden.
Nach dem Ende des Durchlaufs beginnt ein erneuter
Durchlauf (Loop).
Im Download finden sie eine HTML-Datei des Beispiels
mit den zugehörigen Grafiken.
Eigenschaften
- Die Anzahl der Images unbegrenzt
- URL für jedes Image individuell wählbar
- Bilder werden vorgeladen
- Anzeigezeit (Intervall) kann angepaßt werden.
Bedingungen
- identische Bildmaße
- Netscape ab Version 3
- Explorer ab Version 4
Funktion
Die Adressen (URLs) für die anzuzeigenden Bilder sind in einem Register (Array) eingetragen.
Dem im BODY notierten Bild wurde ein Name zugewiesen (attribut 'name'). Das JavaScript legt die URL für das jeweils anzuzeigende Bild im festgelegten Intervallen (1000 ms) neu fest. Die Informationen für die URLs werden dem Register (Array) entnommen.
Das wird so lange wiederholt, bis alle eingetragenen Bilder angezeigt wurden. Danach wird der interne Zähler zurückgesetzt und ein neuer Durchlauf beginnt.
Zuweisung des Bildnamens:
<img name="foto01" src="bild01.gif" ... alt="">
Anpassungen
Ich habe mit Absicht die Zuweisung der Bildquellen (URLs) nicht zur Vereinfachung in eine Schleife eingebunden. So können Grafiken aus unterschiedlichen Ordnern eingebunden werden.
Zuordnung der Bild-URLs im Script (siehe auch Quelltextauszug unten):
| Element |
Variable |
Zuweisung im Beispiel |
ersetzen mit |
| Bild 1 |
aImage[0] |
bild01.gif |
Pfad/Dateiname |
| Bild 2 |
aImage[1] |
bild02.gif |
Pfad/Dateiname |
 (analog für weitere Bilder) |
|
Zur Anpassung der Variablenwerte im Script:
| Element |
Variable |
Zuweisung im Beispiel |
ersetzen mit |
| Anzeigezeit |
xZeit |
1000 |
Wert in ms |
| Anzahl der Bilder |
xAnzahl |
9 |
numerischer Wert |
|
JavaScript (Auszug), vollständiger ScriptCode siehe Quellcode-Textdatei
Die hier rot gekennzeichneten Notierungen passen sie ihrer Seite an. Die Anzahl der Eintrage für die Bild-URLs (hier 9) müssen mit dem numerischen Wert (hier 9) für die Variable 'xAnzahl' übereinstimmen.
// Anpassungen hier eintragen
var xAnzahl = 9; // 9 = Anzahl der Images
var xZeit = 1000; // 1000 Anzeigezeit in ms
// Bilder vorladen
function load() {
LadeIndikator=1;
aImage = new Array(xDurchlauf)
for (i=0; i < xAnzahl; i++) {
aImage[i] = new Image();
}
// URL der Bilder hier eintragen
aImage[0].src = "bild01.gif";
aImage[1].src = "bild02.gif";
aImage[2].src = "bild03.gif";
aImage[3].src = "bild04.gif";
aImage[4].src = "bild05.gif";
aImage[5].src = "bild06.gif";
aImage[6].src = "bild07.gif";
aImage[7].src = "bild08.gif";
aImage[8].src = "bild09.gif";
}
der OnLoad EventHandler im BODY-Tag
<body onLoad="ani();" ... >
der OnLoad EventHandler für zeitverzögerten Start
<body onLoad="setTimeout('ani()', 5000);" ... >
Das könnte sie auch interessieren:
Ein manueller Bildwechsel mit optionaler Zufallsfunktion
für das erste angezeigte Bild. Zusätzlich wir der
zugehörige Erlärungstext eingeblendet
 Diashow manuelle Steuerung
|
|
|
WWW.WEB-TOOLBOX.NET
Download 
BEISPIEL 
ZURÜCK