Regarde cet exemple, J'ai adapté ton script en mettant en avant des idées pour augmenter la réactivité de l'animation. Le mot clé ici est : setTimeout() qui est la fonction javascript qui exécute un processus dans le temps.
<html>
<head>
<script type="text/javascript">
// Variables globales
var urlImage = new Array(37), indexActuel = 1;
var vitesse = 0, sens = "suivant";
var process = null;
//
//
function precedent(){
// Index Précédent
indexActuel --;
// Rembobiner si < à la première image
if (indexActuel <1) indexActuel = urlImage.length -1;
// Afficher l'image
document.getElementById("afficheurImage").src = urlImage[indexActuel].src;
}
//
function suivant(){
// Index Précédent
indexActuel ++;
// Rembobiner si > à la dernière images
if (indexActuel >= urlImage.length) indexActuel = 1;
// Afficher l'image
document.getElementById("afficheurImage").src = urlImage[indexActuel].src;
}
//
function demarrer(){
// Est réglable par : arrêt, vitesse et sens
if (sens == "suivant") suivant(); else precedent();
// Afficher les images en boucle à la vitesse donnée
process = setTimeout('demarrer()', vitesse);
}
//
function arreter(){
// Arrêter l'animation
clearTimeout(process);
}
//
window.onload = function(){
// Précharger les images dans un tableau
for (i=1; i<37; i++){
urlImage[i] = new Image();
urlImage[i].src = "images/"+(i<10?"0"+i:i)+".jpg"; //format: images/99.jpg
}
// Afficher l'animation
vitesse = 0; sens = "suivant";
demarrer();
}
</script>
</head>
<body bgcolor="#FFFFFF">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<th colspan="4">
<img name="afficheurImage" id="afficheurImage" border="0" />
</th>
</tr>
<tr>
<th><img src="images/precedent.gif" width="38" height="30" border="0" style="cursor:pointer" onClick="sens='precedent';" /></th>
<th><img src="images/marche.gif" width="38" height="30" border="0" style="cursor:pointer" onClick="demarrer();" /></th>
<th><img src="images/arret.gif" width="38" height="30" border="0" style="cursor:pointer" onClick="arreter();" /></th>
<th><img src="images/suivant.gif" width="38" height="30" border="0" style="cursor:pointer" onClick="sens='suivant';" /></th>
</tr>
<tr>
<th colspan="4">Vitesse <input value="0" size="3" onChange="vitesse=this.value" />(1000 = 1 seconde)</th>
</tr>
</table>
</body>
</html>
Le principe est simple : Les Url des images sont stockées dans un tableau global, un compteur global permet de parcourir ces Url une par une pour les afficher dans une <img>. Le parcourt est assuré dans les deux sens (variable : sens) par une fonction demarrer() qui boucle automatiquement dans le temps par un setTimeout dont la vitesse est contrôlée par la variable : vitesse.
On peut aussi arrêter l'animation par la fonction : clearTimeout()
EDIT: J'ai ajouté le préchargement des images.