JavaScript Picture Playback class ImageSlide.iclass.js

Javascript|js

Demo See this:http://www.iecn.net/iclass/js/ImageSlide/
Open, right, view the source can see the invocation of the instance.

The source code is as follows:

/**
* =========================================================================
* This procedure is free to copy, modify, disseminate, and shall not delete the following information. Used for commercial use subject to the consent of the original author.
* =========================================================================
* Program Name: Forcewindow (@iClass. JS)
* Description: Picture slides on the Web page.
* Version: 1.0.0
* Date Created: April 23, 2005
* Modified Date: April 23, 2005
* Author: Zhongzhong
* Email Address:zhong@iecn.net
* Copyright Notice: This procedure belongs to Iclass.js, copyright is owned by the author.
* Discussion Address:http://www.iecn.net/forum/showthread.php?threadid=16975
* For details of the IClass project:http://www.iecn.net/forum/showthread.php?threadid=14811
* =========================================================================
*/

Construct Imageslide Class
function Imageslide () {
if ((/msie\s*[5-9]/). Test (navigator.appversion)) {
This.count = 0;
This.timer = null;
This.first = new Object ();
This.frms = new Array ();

This.imgs = new Array ();
This.width = 640;
This.height = 480;
This.boxid = "Imageslidebox";
This.delay = 5;
This.autoplay = true;
This.transform = 23;
/**
* Playback Switch Effect description
* --------------
* 0. Rectangle Narrowing
* 1. Rectangle enlargement
* 2. Round Shrink
* 3. Circular enlargement
* 4. From bottom to top
* 5. From top to bottom
* 6. From left to right
* 7. From right to left
* 8. Vertical Blinds
* 9. Horizontal Blinds
* 10. Dislocation Horizontal Blinds
* 11. Dislocation Vertical Blinds
* 12. Point diffusion
* 13. Both sides to the middle
* 14. Middle to both sides
* 15. Middle to bottom
* 16. Up and down to the middle
* 17. Lower right to top left
* 18. Top right to bottom left
* 19. Top left to bottom right
* 20. Bottom left to top right
* 21. Cross Bar
* 22. Vertical bar
* 23. Random
* --------------
*/
}
else {
Alert ("Please use this program using IE5 or IE5 version of the browser!") ");
}
}

Add one or more pictures (pass in one or more picture paths)
Pushimg (sPath1 [, SPath2 [, SPath3 [, ...]]]
ImageSlide.prototype.pushImgs = function () {
for (var i = 0; i < arguments.length; i++)
This.imgs.push (Arguments[i]);
}

Set the width of the picture playback container
ImageSlide.prototype.setSize = function (nwidth, nheight) {
This.width = nwidth;
This.height = nheight;
}

Set the ID of the picture playback container
ImageSlide.prototype.setBoxId = function (SBOXID) {
This.boxid = Sboxid;
}

Set whether to play automatically
ImageSlide.prototype.setAutoPlay = function (bautoplay) {
This.autoplay = Bautoplay;
}

Set the number of delay seconds to play automatically
ImageSlide.prototype.setDelay = function (nseconds) {
This.delay = nseconds;
}

Sets the toggle effect of playback (integer 0-23)
ImageSlide.prototype.setTransform = function (ntransform) {
This.transform = Ntransform;
}

Show
ImageSlide.prototype.display = function () {
var boxstr = "<div style= ' width:" + this.width + "Px;height:" + this.height + "px;" ";
Boxstr + + "id= '" + This.boxid + "' ><div";
if (This.autoplay)
Boxstr + = "";
Else
Boxstr + = "";
Boxstr + = "style= ' word-break:keep-all;width:100%;height:100%;background-color: #EEEEEE;" > ";
if (This.autoplay)
Boxstr + = "<br/> Click here to start AutoPlay ...";
Else
Boxstr + = "<br/> Click here to start playing, play the next one click Play ...";
Boxstr = "</div>";
var img;
var transform = This.transform;
for (var i = 0; i < this.imgs.length; i++) {
if (This.transform >= 23)
var transform = Math.floor (Math.random () *23);
Boxstr + + "Boxstr + + this.width + "Height:" + this.height + "Px;height:px;filter:";
Boxstr + = "Revealtrans (transition=" + Transform + ", duration=1);
if (!this.autoplay)
Boxstr + = "'";
Boxstr + = "/>";
}
Boxstr = "</div>";
Document.writeln (BOXSTR);
var box = document.getElementById (THIS.BOXID);
This.first = Box.childnodes[0];
This.frms = Box.getelementsbytagname ("IMG");
}

Play
ImageSlide.prototype.play = function () {
if (window.imageSlide.imgs.length) {
Window.imageSlide.first.style.display = "None";
if (Window.imageSlide.count >= window.imageSlide.imgs.length) {
Alert ("Playback complete!") ");
Window.imageslide.frms[window.imageslide.count-1].style.display = "None";
Window.imageSlide.first.style.display = "block";
Window.imageSlide.first.innerHTML = "<br/> Click here to play again!" ";
Clearinterval (Window.imageSlide.timer);
Window.imageSlide.count = 0;
}
else if (window.imageSlide.count = 0) {
Window.imageSlide.first.style.display = "None";
Window.imageslide.frms[0].filters[0].apply ();
Window.imageslide.frms[0].style.display = "block";
Window.imageslide.frms[0].filters[0].play ();
}
else {
Window.imageslide.frms[window.imageslide.count-1].style.display = "None";
Window.imageslide.frms[window.imageslide.count].filters[0].apply ();
Window.imageslide.frms[window.imageslide.count].style.display = "block";
Window.imageslide.frms[window.imageslide.count].filters[0].play ();
}
window.imageslide.count++;
}
else {
Alert ("You don't put any pictures in, you can't play!") ");
}
}

Continuous playback
ImageSlide.prototype.timerPlay = function () {
This.timer = SetInterval (This.play, This.delay * 1000);
}

Instantiate a Imageslide object imageslide and make it a child object of the Window object
Window.imageslide = new Imageslide ();