Tatyana,
Javascript allows arrays to have properties and methods in addition to their normal elements [0], [1], [2] etc.
Hence we can define all the functions associated with the breakdance animation as methods of a breakdance array, which also holds all the preloaded images. Each function is fairly simple.
This approach exposes just one variable (breakdance) to the global namespace.
If you wanted two or more animations on the same page, then it would be a fairly small step to convert the code into a reusable prototype (class) such that you could avoid duplicating everything for each animation.
var breakdance = [];//New Array
breakdance.allow = false;//This allows/disallows image rotation.
breakdance.numb = 0;//Counter.
breakdance.tim = null;//Opaque setTimeout variable.
breakdance.img = null;//The <img> element in which the animation will show.
breakdance.delay = 500;//Default animation delay (can be overridden with .setDelay() method).
breakdance.imgturn = function(){//Function that performs the animation.
if (document.images && breakdance.img){
breakdance.img.src = breakdance[breakdance.numb].src;
breakdance.numb = ++breakdance.numb % breakdance.length;//Increment counter, with wrap-around back to 0.
clearTimeout(breakdance.tim);//In case there's already another timeout in waiting.
if(breakdance.allow) { breakdance.tim = setTimeout('breakdance.imgturn()', breakdance.delay); }//Call breakdance.imgturn() again after delay.
}
};
breakdance.start = function(){//Start the animation
breakdance.allow = true;//Allow it.
breakdance.imgturn();//Start it.
};
breakdance.stop = function(){//Stop the animation
clearTimeout(breakdance.tim);//Clear any timeout currently in waiting
breakdance.allow = false;
};
breakdance.rewind = function(){
breakdance.stop();//Stop the animation
breakdance.numb = 0;//Reset counter to zero
breakdance.imgturn();//Show the first image in the rotation.
};
breakdance.setImg = function(id){
if(!id) { return; }
breakdance.img = document.getElementById(id);//Set id of required <img> element
if(!breakdance.img) { alert('img id=' + id + ' not found on the page'); }
};
breakdance.setDelay = function(x){//Set animation delay in milliseconds
breakdance.delay = Number(x);
};
breakdance.preload = function(n, prefix, suffix){
if(!n){ return; }
prefix = (!prefix) ? '' : prefix;
suffix = (!suffix) ? '.gif' : suffix;
if (document.images){
for(var i=0; i<n; i++){
breakdance[i] = new Image();
breakdance[i].src = prefix + (i+1) + suffix;//Preload images into breakdance array.
}
}
};
onload = function(){//A function which executes when the page has loaded, initialising breakdance.
//As far as possible we control the behaviour here rather than "hard code" it in the methods.
breakdance.preload(8, 'images/breakdance', '.gif');//preload images
breakdance.setDelay(250);//override hardcoded default.
breakdance.setImg('demo');
breakdance.rewind();
}
<img id="demo" src="images/breakdance1.gif" />
<form action="">
<p>
<input type="button" value="Rewind" onclick="breakdance.rewind();"/>
<input type="button" value="Start" onclick="breakdance.start();"/>
<input type="button" value="Stop" onclick="breakdance.stop()"/>
</p>
</form>
This should work in all modern browsers.
It will take a bit of time to get your mind round this but it will be worthwhile in the longrun. Your javascript will improve by learning fom other people's code.
Lastly, there are many other good javascript solutions to this problem. This is just one.
Airshow 
Unsolved 
