The below javascript example is the html source code from the webpage http://seacoos.org/Data%20Access%20and%20Mapping/radar/scgawera which demonstrates how to add javascript type controls for a website animation.

The below code can probably use some better optimizations in the loops/images referenced or client caching of images.

<!-- The below javascript was developed by Eric Bridger in association with http://gomoos.org , http://openiooos.org and button images developed by UAH via SCOOP funding.  Please include this credit information if copying/using this script. --> 
<script language="javascript">
var j=0;
var animated=null; 
var end_pause=0;
var pick_color='yellow';
var speed = 1000;
var maps=new Array(); 
maps[0] = 'http://seacoos2.oasis.unc.edu/images/mapCache/nrtobs_is_scwera_currents_24_large.png';
maps[1] = 'http://seacoos2.oasis.unc.edu/images/mapCache/nrtobs_is_scwera_currents_23_large.png';
maps[2] = 'http://seacoos2.oasis.unc.edu/images/mapCache/nrtobs_is_scwera_currents_22_large.png';
maps[3] = 'http://seacoos2.oasis.unc.edu/images/mapCache/nrtobs_is_scwera_currents_21_large.png';
maps[4] = 'http://seacoos2.oasis.unc.edu/images/mapCache/nrtobs_is_scwera_currents_20_large.png';
maps[5] = 'http://seacoos2.oasis.unc.edu/images/mapCache/nrtobs_is_scwera_currents_19_large.png';
maps[6] = 'http://seacoos2.oasis.unc.edu/images/mapCache/nrtobs_is_scwera_currents_18_large.png';
maps[7] = 'http://seacoos2.oasis.unc.edu/images/mapCache/nrtobs_is_scwera_currents_17_large.png';
maps[8] = 'http://seacoos2.oasis.unc.edu/images/mapCache/nrtobs_is_scwera_currents_16_large.png';
maps[9] = 'http://seacoos2.oasis.unc.edu/images/mapCache/nrtobs_is_scwera_currents_15_large.png';
maps[10] = 'http://seacoos2.oasis.unc.edu/images/mapCache/nrtobs_is_scwera_currents_14_large.png';
maps[11] = 'http://seacoos2.oasis.unc.edu/images/mapCache/nrtobs_is_scwera_currents_13_large.png';
maps[12] = 'http://seacoos2.oasis.unc.edu/images/mapCache/nrtobs_is_scwera_currents_12_large.png';
maps[13] = 'http://seacoos2.oasis.unc.edu/images/mapCache/nrtobs_is_scwera_currents_11_large.png';
maps[14] = 'http://seacoos2.oasis.unc.edu/images/mapCache/nrtobs_is_scwera_currents_10_large.png';
maps[15] = 'http://seacoos2.oasis.unc.edu/images/mapCache/nrtobs_is_scwera_currents_9_large.png';
maps[16] = 'http://seacoos2.oasis.unc.edu/images/mapCache/nrtobs_is_scwera_currents_8_large.png';
maps[17] = 'http://seacoos2.oasis.unc.edu/images/mapCache/nrtobs_is_scwera_currents_7_large.png';
maps[18] = 'http://seacoos2.oasis.unc.edu/images/mapCache/nrtobs_is_scwera_currents_6_large.png';
maps[19] = 'http://seacoos2.oasis.unc.edu/images/mapCache/nrtobs_is_scwera_currents_5_large.png';
maps[20] = 'http://seacoos2.oasis.unc.edu/images/mapCache/nrtobs_is_scwera_currents_4_large.png';
maps[21] = 'http://seacoos2.oasis.unc.edu/images/mapCache/nrtobs_is_scwera_currents_3_large.png';
function prevMap(){ 
   if (j==0){
      j=21;
   }else{
      j--;
   }  
   mapIm=new Image(); 
   mapIm.src=maps[j]; 
   document.images.mapimg.src=mapIm.src; 
}
function nextMap(){ 
   if(j==21){ 
      if(end_pause != 0){
         stopSlides();
         pause(end_pause);
         startSlides();
      }
      j=0; 
   }else{ 
      j++; 
   }     
   mapIm=new Image(); 
   mapIm.src=maps[j]; 
   document.images.mapimg.src=mapIm.src; 
}
function pickMap(n){ 
   j=n
   mapIm=new Image(); 
   mapIm.src=maps[j]; 
   document.images.mapimg.src=mapIm.src; 
}  
function startSlides(){ 
   if(animated){
      clearInterval(animated);
   }
   animated=setInterval("nextMap()",speed);
} 
function stopSlides(){ 
   clearInterval(animated);
   return false;
} 
function goToImage(j){
   mapIm=new Image(); 
   mapIm.src=maps[j]; 
   document.images.mapimg.src=mapIm.src; 
}
function pause(numberMillis)
{
   var now = new Date();
   var exitTime = now.getTime() + numberMillis;
   while (true)
   {
      now = new Date();
      if (now.getTime() > exitTime)
         return;
   }
} 
function decreaseSpeed()
{
   if(speed >= 2500){
      return;
   }
   speed = speed + 250;
   stopSlides();
   startSlides();
   return;
}
function increaseSpeed()
{
   if(speed <= 500){
      return;
   }
   speed = speed - 250;
   stopSlides();
   startSlides();
   return;
}
function setSpeed(numberMillis)
{
   speed = numberMillis;
   stopSlides();
   startSlides();
   return true;
}
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_findObj(n, d) { //v4.0
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && document.getElementById) x=document.getElementById(n); return x;
}
//-->
</script>
<body>
<br><br>
<table width="100%">
<tr>
<td align="center">
<img name="mapimg" id="mapimg" 
src="http://seacoos2.oasis.unc.edu/images/mapCache/nrtobs_is_scwera_currents_3_large.png" 
border="0" style="position: relative; cursor:pointer; cursor:hand; border: 1px solid black;" onclick="return mapPopup(event);">
</td>
</tr>
<tr>
<td align="center">
<a href="" onclick="javascript:return false;" onmousedown="MM_swapImage('back1','','buttons/anim_back_on.gif',1)" 
onmouseover="MM_swapImage('back1','','buttons/anim_back_over.gif',1)" onmouseout="MM_swapImgRestore()">
<img onclick="javascript:prevMap();" src="buttons/anim_back.gif"
 alt="Back" name="back1" id="back" border="0" height="27"></a>
<a href="" onClick="javascript:return false;" onMouseDown="MM_swapImage('forward1','','buttons/anim_forward_on.gif',1)" 
onMouseOver="MM_swapImage('forward1','','buttons/anim_forward_over.gif',1)" onMouseOut="MM_swapImgRestore()">
<img onClick="javascript:nextMap();" src="buttons/anim_forward.gif"
 alt="Forward" name="forward1" height="27" border="0" id="forward1"></a>
<a href="" onClick="javascript:return false;" onMouseDown="MM_swapImage('play1','','buttons/anim_play_on.gif',1)"
 onMouseOver="MM_swapImage('play1','','buttons/anim_play_over.gif',1)" onMouseOut="MM_swapImgRestore()">
<img onClick="javascript:startSlides();" src="buttons/anim_play.gif"
 alt="Play" name="play1" height="27" border="0" id="play1"></a>
<a href="" onClick="javascript:return false;" onMouseDown="MM_swapImage('stop1','','buttons/anim_stop_on.gif',1)"
 onMouseOver="MM_swapImage('stop1','','buttons/anim_stop_over.gif',1)" onMouseOut="MM_swapImgRestore()">
<img onClick="javascript:stopSlides();" src="buttons/anim_stop.gif"
 alt="Stop" name="stop1" height="27" border="0" id="stop1"></a>
<a href="" onClick="javascript:return false;" onMouseDown="MM_swapImage('faster1','','buttons/anim_faster_on.gif',1)"
 onMouseOver="MM_swapImage('faster1','','buttons/anim_faster_over.gif',1)" onMouseOut="MM_swapImgRestore()">
<img onClick="javascript:increaseSpeed();" src="buttons/anim_faster.gif"
 alt="Faster" name="faster1" width="51" height="27" border="0" id="faster1"></a>
<a href="" onClick="javascript:return false;" onMouseDown="MM_swapImage('slower1','','buttons/anim_slower_on.gif',1)"
 onMouseOver="MM_swapImage('slower1','','buttons/anim_slower_over.gif',1)" onMouseOut="MM_swapImgRestore()">
<img onClick="javascript:decreaseSpeed();" src="buttons/anim_slower.gif"
 alt="Slower" name="slower1" width="57" height="27" border="0" id="slower1"></a>
</td>
</tr>

to top