Diashow in JavaScript II

In "Diashow mit JavaScript" wurde gezeigt, wie man in Javascript eine Diashow realisiert.

Die Routinen dort zeigten eine Reihe von Bildern in einer festlegbaren Geschwindigkeit an.

Nachteilig war dort die direkte Nutzung eines Feldes und die Notwendigkeit, dass alle Bilder gleich groß sein mussten.

Hier finden Sie nun eine Diashow, die mit Funktionsaufrufen betrieben wird. Sie ist daher einfacher zu nutzen. Zudem können die Bilder beliebig und insbesondere unterschiedlich groß sein.

Darüber hinaus können Sie das Javascript direkt von meinem Server laden und nutzen.

Der Source

Wir erstellen eine Datei diashow.js, die das Javascript enthält (oder laden es direkt von meinem Server, siehe Beispiel):

// diashow II - Thomas Salvador, 2010, brauchbar.de
// free to use, if this notice is kept intact

var diashow_data = new Array();
var diashow_pos  = 0;

function diashow_define(picture) {
  diashow_data[diashow_data.length] = new Array(picture);
}

function diashow_update(id,speed) {
  container = document.getElementById(id);
  img = diashow_data[diashow_pos++];
  if (diashow_pos >= diashow_data.length) {
    diashow_pos = 0;
  }
  container.innerHTML = '<img src="'+img+'"></a>';
  setTimeout('diashow_update("'+id+'",'+speed+')',speed);
</a>

Die Dokumentation

Die Banner werden als Feld diashow_data angelegt, dessen Werte den URL des Bildes enthalten. Es wird durch Aufrufe von diashow_define(BildURL) gefüllt.

Die ausgebende Funktion heißt diashow_update(id,speed) und platziert den HTML-Code im Platzhalter id. Die Pause zwischen den Bildern beträgt speed Millisekunden.

Die Routine wählt das aktuelle Bild, welches durch diashow_pos angezeigt wird und setzt die Position weiter. Ist das Ende der Bildfolge erreicht, wird diashow_pos wieder auf 0 gesetzt, was dem ersten Bild entspricht.

Anschließend erzeugt die Routine den HTML-Code und platziert diesen im Container id, und fordert dann mit setTimeout() die nächste Ausführung der Routine nach speed Millisekunden.

Die Verwendung

Zur Einbindung platzieren Sie im Kopfbereich Ihres Dokumentes die Anweisung

<script type="text/javascript" src="diashow.js"></script>

Sie können das Javascript direkt von meinem Server laden:

<script type="text/javascript" src="//brauchbar.de/services/diashow-100.js"></script>

Nun legen Sie fest, wo die Diashow stehen soll und erzeugen dort einen leeren Container mit entsprechendem Namen:

<div id="meinediashow"></div>

Erzeugen Sie im Kopfbereich eine Funktion, die ihre Diashow definiert und die Ausgabe fordert:

<script type="text/javascript"><!--
  function mydiashow() {
    diashow_define('https://brauchbar.de/images/bb-logo2.gif');
    ...
    diashow_update("meinediashow",1000);
  }
//-->
</script>

Abschließend lassen Sie diese Funktion starten, wenn das Dokument geladen wurde. Geeignet ist hier der onload-Event des body}-Tag:

<body onload="mydiashow();">

Das Beispiel

In diesem Beispiel wird eine Diashow mit fünf Bildern unterschiedlicher Größe erzeugt, die mit einer Pause von drei Sekunden rotieren.

<html>
<head>
<title>Diashow-Beispiel</title>
<script type="text/javascript"
  src="//brauchbar.de/services/diashow-100.js"></script>
<script type="text/javascript"><!--
  function mydiashow() {
    diashow_define('https://brauchbar.de/images/bb-logo2.gif');
    diashow_define('https://brauchbar.de/images/bb-button.gif');
    diashow_define('https://google.de/intl/de_de/images/logo.gif');
    diashow_define('https://brauchbar.de/images/bb-button2.gif');
    diashow_define('https://brauchbar.de/images/bb-button3.gif');
    diashow_update("meinediashow",3000);
  }
//-->
</script>
</head>
<body onload="mydiashow();">
<p>Vor dem Bild.</p>
<div id="meinediashow"></div>
<p>Nach dem Bild.</p>
</body>
</html>

Das sieht dann so aus:

Vor dem Bild.

Nach dem Bild.

Naürlich sind es normalerweise mehr Bilder und diese von gleicher oder zumindest ähnlicher Größe.