Frankfurt & Rhein Main

Bildwechsel mit Javascript - Slideshow

DruckversionPDF version

Erläuterung: http://de.selfhtml.org/javascript/objekte/images.htm#src

<img src="./images/photo01.jpg"  alt="Slideshow">
<script type="text/javascript">
var b = new Array();
b[0] = new Image(); b[0].src = "./images/photo01.jpg";
b[1] = new Image(); b[1].src = "./images/photo02.jpg";
b[2] = new Image(); b[2].src = "./images/photo03.jpg";
b[3] = new Image(); b[3].src = "./images/photo04.jpg";
b[4] = new Image(); b[4].src = "./images/photo05.jpg";
var i = 0;
function Animation () {
  if (i > 4)
    i = 0;
  document.images[0].src = b[i].src;
  i = i + 1;
  window.setTimeout("Animation()", 1000);
}

window.setTimeout("Animation()", 1000);
</script>

Achtung: Javascript zählt die Bilder d.h. die <img> Elemente einer Webseite durch. Auf dieser Webseite z.B. würde bei der Angabe [0] das Logo ausgetauscht.
Sie sehen obigen Code hier in Aktion, der Code befindet sich im <body> des Quelltexts.

Sie können dem Austauschbild auch einen Namen geben mit name=bild innerhab des <img > tags und diesen Namen anstelle der Zahl verwenden. Diese Methode verwendet das folgende Beispiel mit Bildwechsel bei Überstreichen mit der Maus. Sie finden den Code im Quelltext.

rhein-main-experten.de wird überprüft von der Initiative-S