Animation on several images : Animation : GUI Components JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » GUI Components » Animation »

 

Animation on several images




/*
Examples From
JavaScript: The Definitive Guide, Fourth Edition

Legal matters: these files were created by David Flanagan, and are
Copyright (c) 2001 by David Flanagan.  You may use, study, modify, and
distribute them for any purpose.  Please note that these examples are
provided "as-is" and come with no warranty of any kind.

David Flanagan
*/
<!-- The image that will be animated. Give it a name for convenience. -->
<img name="animation" src="images/0.gif">

<script>
// Create a bunch of off-screen images, and pre-fetch the "frames"
// of the animation into them so that they're cached when we need them.
var aniframes = new Array(10);
for(var i = 0; i < 10; i++) {
    aniframes[inew Image();                 // Create an off-screen image
    aniframes[i].src = "images/" + i + ".gif";  // Tell it what URL to load.
}

var frame = 0;         // The frame counter: keeps track of current frame.
var timeout_id = null// Allows us to stop the animation with clearTimeout()

// This function performs the animation.  Call it once to start.
// Note that we refer to the on-screen image using its name attribute.
function animate() {
    document.animation.src = aniframes[frame].src; // Display the current frame
    frame = (frame + 1)%10;                        // Update the frame counter
    timeout_id = setTimeout("animate()"250);     // Display next frame later.
}
</script>

<form>  <!-- This form contains buttons to control the animation. -->
  <input type="button" value="Start"
   onclick="if (timeout_id == null) animate();">
  <input type="button" value="Stop" 
   onclick="if (timeout_id) clearTimeout(timeout_id); timeout_id=null;">
</form>


           
       



-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo GUI Components
» Animation