1 <HTML> 2 <HEAD> 3 <TITLE>JavaScript Example: Animation</TITLE> 4 5 <SCRIPT LANGUAGE="JavaScript"> 6 <!-- hide script from old browsers 7 8 var delay = 200; // initial delay 9 var minDelay = 40; var maxDelay = 400; 10 var delayIncrement = 20; 11 var imageNum = 0, numImages = 4; 12 13 // Preload images: 14 image = new Array( numImages ); 15 for ( var i = 0; i < numImages; i++ ) { 16 image[i] = new Image(); 17 image[i].src = "../../../images/juggler" + i + ".gif"; 18 } 19 20 function animate() { 21 imageNum = ( imageNum + 1 ) % numImages; 22 document.animation.src = image[imageNum].src; 23 window.status = "Delay = " + delay.toString(); 24 } 25 26 function slower() { 27 delay += delayIncrement; 28 if ( delay > maxDelay ) delay = maxDelay; 29 } 30 31 function faster() { 32 delay -= delayIncrement; 33 if ( delay < minDelay ) delay = minDelay; 34 } 35 36 // end script hiding --> 37 </SCRIPT> 38 39 </HEAD> 40 41 <BODY BGCOLOR="#ffffff"> 42 43 <CENTER> 44 45 <!-- Since 'animate' loads a new image, the following 46 event handler is implicitly recursive. --> 47 48 <IMG NAME="animation" SRC="../../../images/juggler0.gif" 49 onLoad="setTimeout('animate()', delay)"> 50 51 <FORM> 52 <INPUT TYPE="button" Value="Slower" onClick="slower()"> 53 <INPUT TYPE="button" Value="Faster" onClick="faster()"> 54 </FORM> 55 56 </CENTER> 57 58 </BODY>