 automatischer Bildwechsel 01-B (für 2 Bildserien)
Zwei Grafiken innerhalb einer HTTML-Seite mit zugewiesenen Namen werden angezeigt und mittels JavaScript in einem festgeleten Zeitintervall laufend ausgetauscht. Funktionen für 2 Bildwechsel innerhalb einer Seite.
|
|
automatischer Bildwechsel für 2 Grafiken mit Vorladen der Grafiken
Demo mit Startverzögerung 1500 / 2000 Millisekunden
Bild 1: id="Grafik01"
|
Bild 2: id="Grafik02"
|
5 Images werden im zeitlichen Abstand
von 1000 ms wechselnd angezeigt. |
4 Images werden im zeitlichen Abstand
von 1500 ms wechselnd angezeigt. |
2 Grafiken mit dem Namen 'Grafik01' und 'Grafik02' werden angezeigt und mittels 2 Funktionen Bildwechsel01() und Bildwechsel02() laufend ersetzt. Nach dem Durchlauf der Bilder beginnt ein erneuter Durchlauf (Loop).
Funktion
Die Adressen (URLs) für die anzuzeigenden Bilder werden in zwei Register (Arrays) eingetragen. Den beiden im BODY notierten Grafiken wurde eine (unterschiedliche) ID zugewiesen (attribut 'id'). Die Bildwechselfunktionen 1 und 2 änden die URLs für das jeweils anzuzeigende Bild im festgelegten Intervallen (Anzeigezeit). Die Informationen für die Bild-URLs werden dabei dem entsprechenden 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 der ID:
<img id="Grafik01" src="alien01.gif" width="49" height="59" ... alt="">
<img id="Grafik02" src="face01.gif" width="50" height="50" ... alt="">
Eigenschaften
- die Anzahl der Grafiken für jede Show ist unbegrenzt
- die Adress (URL) für jedes Image ist individuell wählbar
- die Grafiken werden vorgeladen (Array)
- die Anzeigezeit für jede Bildserie (Intervall) kann unterschiedlich sein
- die Startverzögerung für jede Bildserie kann unterschiedlich sein
Anpassungen
1 Eintragen der Bildinformation
Die Zuordnung der Bild-URLs für die beiden Bildsereien erfolgt durch Einträge und Zuweisung zum entsprechenden Array (Register).
// bilder serie 1 in ein Register laden
// URL der Bilder hier eintragen
ImageArr1[ImageArr1.length] = "alien01.gif";
ImageArr1[ImageArr1.length] = "alien02.gif";
ImageArr1[ImageArr1.length] = "alien03.gif";
ImageArr1[ImageArr1.length] = "alien04.gif";
ImageArr1[ImageArr1.length] = "alien05.gif";
// bilder serie 2 in ein Register laden
// URL der Bilder hier eintragen
ImageArr2[ImageArr2.length] = "face01.gif";
ImageArr2[ImageArr2.length] = "face02.gif";
ImageArr2[ImageArr2.length] = "face03.gif";
ImageArr2[ImageArr2.length] = "face04.gif";
Zur Anpassung der Image-Informationen im Script:
| Element |
Variable |
Zuweisung im Beispiel |
ersetzen mit |
| Bild 1 |
ImageArr1[ImageArr1.length] |
bild01.gif |
Pfad/Dateiname |
| Bild 2 |
ImageArr1[ImageArr1.length] |
bild02.gif |
Pfad/Dateiname |
 (analog für weitere Bilder)
2 Anzeigezeit
Zur Anpassung der Variablenwerte im Script:
| Element |
Variable |
Zuweisung im Beispiel |
ersetzen mit |
| Anzeigezeit Serie 1 |
WechselZeit01 |
1000 |
Wert in ms |
| Anzeigezeit Serie 1 |
WechselZeit02 |
1500 |
Wert in ms |
3 Startverzögerung
// Startverzögerung Serie 1
setTimeout('Bildwechsel01()',1500);
// Startverzögerung Serie 2
setTimeout('Bildwechsel02()',2000);
Die Anzahl der Grafiken
Die Anzahl der Bilder (Einträge für die Arrays) wird nun automatisch ermittelt. Bei nachträglicher Änderung der Einträge muss keine Anpassung vorgenommen werden.
var aAnzahl = ImageArr1.length;
var bAnzahl = ImageArr2.length;
vollständiger ScriptCode: Siehe Link Script-Code im Kopfbereich (Textdatei)
Images im Download (passend zu den Eintragungen im Quelltext):
alien01.gif - alien05.gif
    
face01.gif - face05.gif
   
 automatischer Bildwechsel 01-A - zeitgesteuert für 1 Bildserie
automatischer Bildwechsel 03 (Grafik als Link) - zeitgesteuert für 1 Bildserie
Link des Monatstages - 1 von 31 Grafiken als Verweis
Monatslink - 1 von 12 Grafiken als Verweis
Diashow manuelle Steuerung
Ein manueller Bildwechsel mit optionaler Zufallsfunktion
für das erste angezeigte Bild. Zusätzlich wir der
zugehörige Erlärungstext eingeblendet
| 
|
| 
Home • Bilder • automatischer Bildwechsel
Grafiken
Script-Code
