/* 
Mastering JavaScript, Premium Edition 
by James Jaworski  
 
ISBN:078212819X 
Publisher Sybex CopyRight 2001 
*/ 
<HTML> 
<HEAD> 
<TITLE>Simple Animation</TITLE> 
<SCRIPT LANGUAGE="JavaScript"><!-- 
function initialize() { 
 start=false 
 imageSource=new Array(5) 
 for(var i=0;i<5;++i){ 
  imageSource[i]=new Image() 
  imageSource[i].src="image"+i+".gif" 
 } 
 delay=500 
 delta=100 
 nextImage=1 
 startAnimation() 
} 
function startAnimation() { 
 interval=setInterval('animate()',delay) 
} 
function setStart() { 
 start = true 
} 
function animate() { 
 if(start==true){ 
  i=nextImage 
  ++nextImage 
  nextImage%=5 
  if(imageSource[i].complete) 
   document.display.src=imageSource[i].src 
 } 
} 
function goFaster() { 
 clearInterval(interval) 
 delay-=delta 
 if(delay<100) delay=100 
 startAnimation() 
} 
function goSlower() { 
 clearInterval(interval) 
 delay+=delta 
 startAnimation() 
} 
// --></SCRIPT> 
</HEAD> 
<BODY BGCOLOR="#FFFFFF"> 
<SCRIPT LANGUAGE="JavaScript"><!-- 
initialize() 
// --></SCRIPT> 
<H1>Simple Animation</H1> 
<IMG NAME="display" SRC="image0.gif" onLoad="setStart()"> 
<BR> 
<FORM> 
<INPUT TYPE="BUTTON" NAME="faster" VALUE="Faster" ONCLICK="goFaster()"> 
<INPUT TYPE="BUTTON" NAME="slower" VALUE="Slower" ONCLICK="goSlower()"> 
</FORM> 
</BODY> 
</HTML> 
 
            
          
  
  |