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>