JavaScript - zeitgesteuertes Austauschen von Bildern

index Anfang rückwärts vorwärts runter
Das aufgelistete Beispiel demonstriert zeitgesteuertes Austauschen von Bildern.

Beispiel ansehen

Querverweise zum Verständnis : [Einbindung in HTML] [Spezifikation Funktionen] [Spezifikation for-Schleife] [Objektreferenz window (enthält Timer)] [Objektreferenz images] [Objektreferenz Array]

Im folgenden Quelltext sind wichtige Bereiche grün und Kommentare gelb markiert.
index Anfang rückwärts vorwärts hoch runter 
<html>

<head>
<title>
JavaScript - Beispiel
</title>

<script type="text/javascript"> <!-- Script-Bereich einleiten -->
<!--                           /* HTML-Kommentar fuer Browser ohne JavaScript */

var namen=new Array("up.gif","prev.gif","down.gif","next.gif");
  /* Array aller Bildernamen */
var bilder=new Array();
  /* Definition des Bilder-Arrays */
var nr=0;

function lade()
  /* Laedt die Bilder */
{
  var i;                     /* lokale Variablendeklaration */
  for (i=0;i<4;i++)          /* Schleife: i=0..3 */
  {
    bilder[i]=new Image();   /* neues Image-Objekt erzeugen */
    bilder[i].src=namen[i];  /* Quelldateiname des Bildes setzen */
  }
    /* Timeout auf 500 Millisekunden setzen : */
  window.setTimeout("naechstes()",500);
}

function naechstes()
  /* zeigt ein Bild an */
{
  nr=(nr+1)%4;    /* Bild hochzaehlen und mod 4 */
    /* Bild austauschen : */
  document.images[0].src=bilder[nr].src;
    /* Timeout auf 500 Millisekunden setzen : */
  window.setTimeout("naechstes()",500);
}

//-->                          <!-- HTML-Kommentarende -->
</script>                      <!-- Script-Bereich beenden -->

</head>
<body onLoad="lade();">

<a href="bilder2.html">Erkl&auml;rung</a>
  <!-- Link zurueck auf bilder2.html -->

<br>
<br>
<br>

<img src="begin.gif" width="64" height="64">
  <!-- Das Bild -->

</body>
</html>
index Anfang rückwärts vorwärts hoch
Autor: Ulrich Kritzner