Eksempel 2 - Automatisk billedskift

Følgende kode sætter billedet og start/stop knappen op i dokumentet:

<FORM NAME="startanim">
<IMG SRC="chImg/pict1.gif" NAME="autoanim" VSPACE=5>
<INPUT TYPE=button VALUE=Start NAME="startstop" onClick=startstopFct()>
</FORM>

Vi har anbragt billedet (der har fået navnet autoanim) i et FORM-tag, fordi vi gerne vil have en knap til at starte og stoppe animationen.

Knappen har en onClick attribut med værdien startstopFct(). Det betyder, at når der klikkes på knappen, kaldes JavaScript-funktionen startstopFct.

Følgende kodestump, der bl.a. indeholder funktionen startstopFct(), sættes ind i dokumentets hoved, før BODY taget.

<SCRIPT LANGUAGE="JavaScript1.2">
<!--

Imgs = new Array(5);
var pict = 0;
var timerStatus = null;

function hentImg() {
for(var i = 0; i<4; i++) {
Imgs[i] = new Image();
Imgs[i].src = "chImg/pict" + (i+1) + ".gif";
}
};

function startstopFct() {
if(document.startanim.startstop.value == "Start") {
document.startanim.startstop.value = "Stop";
koerAnim();
} else {
document.startanim.startstop.value = "Start";
clearTimeout(timerStatus);
timerStatus = null;
}
};

function koerAnim() {
document.autoanim.src = Imgs[pict].src;
pict = (pict + 1);
if(pict >= 4) {
pict = 0;
}
timerStatus = setTimeout("koerAnim()", 250);
}

// -->
</SCRIPT>

Først definerer vi nogle variable, som vi senere får brug for. Den første er Imgs, et array, der skal indeholde billederne i animationen.

Funktionen hentImg() sørger for at hente billederne ind, så de er klar, når animationen startes. Funktionen kaldes fra BODY tagets onLoad attribut (<BODY onLoad="hentImg()">).

startstopFct ser først på værdien af start/stop-knappen (document.startanim.startstop.value). Hvis den er "Start", sættes den til "Stop" og funktionen koerAnim kaldes, ellers sættes værdien til "Start", og animationen stoppes ved at nulstille animationens tæller (clearTimeout(timerStatus); timerStatus = null;).

Funktionen koerAnim sætter først det næste billede ind i stedet for det 'gamle' autoanim-billede. Det nye billede er billede nummer pict i Imgs-arrayet. Dernæst sættes tælleren pict til værdien for næste billede. Til sidst sættes en timer til at kalde funktionen koerAnim igen om 250 millisekunder. Det er denne sidste linie timerStatus = setTimeout("koerAnim()", 250);, der får animationen til at køre automatisk.