Bilder mit Javascript animieren
Mit Hilfe von Javascript lassen sich verschiedene Grafiken zu einer scheinbar animierten Grafik zusammenfügen.
Voraussetzung dafür ist, dass die Grafiken eine identische Größe besitzen.
<html>
<head>
<script language="JavaScript">
<!--
Bilder = new Array("rot.gif", "gruen.gif", "blau.gif");
var Einblendungsdauer = 1000; // in Millisekunden
var UnendlicheWiederholungen = false;
var AnzahlDerWiederholungen = 5;
var Wiederholungen = 1;
var i = 0;
function BildAnimieren()
{
if(i < Bilder.length)
{
document.NameDesBildes.src = Bilder[i];
i++;
window.setTimeout("BildAnimieren()", Einblendungsdauer);
}
else
{
if(Wiederholungen < AnzahlDerWiederholungen || UnendlicheWiederholungen)
{
i = 0;
Wiederholungen++;
window.setTimeout("BildAnimieren()", 0);
}
else
{
return true;
}
}
}
//-->
</script>
<title>Bilder mit Javascript animieren</title>
</head>
<body onLoad="javascript:BildAnimieren();">
<img height="75" name="NameDesBildes" src="rot.gif" width="100">
</body>
</html>
| Variable | Beschreibung |
Bilder |
In diesem Array notieren Sie alle zur animierten Grafik gehörenden Einzelbilder. Achten Sie dabei auf die entsprechende Reihenfolge. |
Einblendungsdauer |
Diese Variable gibt an, wie lange ein Einzelbild jeweils angezeigt werden soll. Notieren Sie den Wert in Millisekunden (1 Sekunde = 1.000 Millisekunden). |
UnendlicheWiederholungen |
Mit der Einstellung false wird die Animation der Grafik nach Ablauf der angegebenen Wiederholungen (s. AnzahlDerWiederholungen) abgebrochen. Danach wird das letzte Einzelbild ununterbrochen angezeigt. Eine immer fortlaufende Animation erreichen Sie mit dem Wert true. |
AnzahlDerWiederholungen |
Die Wiederholungen der Grafik wird nach der angegebenen Anzahl von Durchläufen abgebrochen. Danach wird das letzte Einzelbild ununterbrochen angezeigt. Die Variable UnendlicheWiederholungen muss bei Verwendung von AnzahlDerWiederholungen auf false stehen. |
An dieser Stelle finden Sie ein Beispiel (Es öffnet sich ein neues Fenster).
Kategorie: Javascript
