Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> Graphics Animation </title>
<style type= "Text/css" >
. de{font-size:30px text-decoration:none font-family: Microsoft James Black; color: #ccc;
. de:hover{color: #933;}
</style>
<script type= "Text/javascript" >
/**
* ImageLoop.js:An Imageloop class for performing image animations
*
* Constructor Arguments:
* imageid:the ID of the tag which would be animated
* fps:the number of frames to display per second
* Frameurls:an array of URLs, one for each frame of the animation
*
* Public Methods:
* Start (): Start the animation (but wait for all frames to load i)
* STOP (): Stop the animation
*
* Public Properties:
* Loaded:true If all frames of the animation have loaded,
* False otherwise
*/
function Imageloop (imageID, fps, frameurls) {
Remember the image ID. Don ' t look at it up yet since this constructor
May was called before the document is loaded.
This.imageid = imageID;
Compute the time to wait between frames of the animation
This.frameinterval = 1000/fps;
An array for holding Image objects for each frame
This.frames = new Array (frameurls.length);
This.image = null; The element, looked up by ID
this.loaded = false; Whether all frames have loaded
This.loadedframes = 0; How many frames have loaded
This.startonload = false; Start animating when do loading?
This.framenumber =-1; What frame is currently displayed
This.timer = null; The return value of SetInterval ()
Initialize the frames[] array and preload the images
for (var i = 0; i < frameurls.length; i++) {
This.frames[i] = new Image (); Create Image Object
Register an event handler so we know when the ' frame is loaded
This.frames[i].onload = Countloadedframes; Defined later
THIS.FRAMES[I].SRC = Frameurls[i]; Preload the frame ' s image
}
This nested function is a event handler that counts how many
Frames have finished loading. When all are loaded, it sets a flag,
and starts the animation if it has been requested to does so.
var loop = this;
function Countloadedframes () {
loop.loadedframes++;
if (loop.loadedframes = = loop.frames.length) {
Loop.loaded = true;
if (loop.startonload) Loop.start ();
}
}
Here we are define a function that displays the next frame of the
Animation. This function can ' t be a ordinary instance method because
SetInterval () can only invoke the functions, not methods. So we make
It a closure that includes a reference to the Imageloop object
This._displaynextframe = function () {
Increment the frame number. The modulo operator (%) means
That we loop from the "Last" to "the" "
Loop.framenumber = (loop.framenumber + 1)% Loop.frames.length;
Update the Src property of the the URL of the new frame
LOOP.IMAGE.SRC = LOOP.FRAMES[LOOP.FRAMENUMBER].SRC;
};
}
/**
* This method is starts an Imageloop animation. If the frame images have not
* Finished loading, it instead sets a flag so the animation would
* Automatically be started when loading completes
*/
ImageLoop.prototype.start = function () {
if (This.timer!= null) return; Already started
If loading is isn't complete, set a flag to start the It is
if (!this.loaded) This.startonload = true;
else {
If We haven ' t looked up the image by ID yet
if (!this.image) this.image = document.getElementById (This.imageid);
Display the ' the ' the ' I frame immediately
This._displaynextframe ();
and set a timer to display subsequent frames
This.timer = SetInterval (This._displaynextframe, this.frameinterval);
}
};
/** Stop an imageloop animation *
ImageLoop.prototype.stop = function () {
if (This.timer) clearinterval (This.timer);
This.timer = null;
};
</script>
<script type= "Text/javascript" >
Function de () {
var animation = new Imageloop ("Loop", 1, ["Img/img_01.jpg", "img/img_02.jpg",]);
var sta = document.getElementById ("STA");
var stp = document.getElementById ("STP");
Sta.onclick = function () {
Animation.start ();
}
Stp.onclick = function () {
Animation.stop ();
}
}
Window.onload = function () {
De ();
}
</script>
<body>
<a href= "#" class= "de" id= "STA" >Start</a>
<a href= "#" class= "de" id= "STP" >Stop</a>
</body>