Explored is how to display of a series of images creating the effect of an animation in a controlled manner.
To juggle.
<fieldset><legend>Controls</legend> <input type="button" class="key" value="Slower" onclick="hurry(1);"/> <input type="button" class="key" value="Faster" onclick="hurry(-1);"/> Speed: <input type="text" class="it" id="speed" size="70" value="frames per second."/> </fieldset> <fieldset><legend>The image</legend> <img src="/image/clip/juggler0.gif" id="animation" alt="Juggler" width="32" height="32"/> </fieldset>
var num = 4, // number of images speed = 200, // initial delay step = 20, min = 20, max = 500, cur = 0, imarray = new Array( num ); function animate() { cur = ( cur + 1 ) % num; document.images.animation.src = imarray[cur].src; gid( 'speed' ).value = ron(1000/speed) + ' frames per second.'; window.setTimeout( 'animate();', speed ); } function hurry( n ) { speed += step * n; if( speed > max ) { speed = max; } if( speed < min ) { speed = min; } } // preload the required files... for( var i = 0; i < num; i++ ) { imarray[i] = new Image(); imarray[i].src = '/image/clip/juggler' + i + '.gif'; } animate();