Javascript图片播放类ImageSlide.iclass.js

关键字: Javascript 图片 播放 类 ImageSlide.iclass.js

演示见此：http://www.iecn.net/iclass/js/ImageSlide/ 打开后，右健，查看源码即可看到调用的实例。 源码如下： /**  * =========================================================================  * 本程序可自由复制、修改、传播，不得删除以下信息。如用于商业用途须经原作者同意方可使用。  * =========================================================================  * 程序名称：ForceWindow(@iClass.JS)  * 描　　述：网页上的图片幻灯片。  * 版　　本：1.0.0  * 创建时间：2005年4月23日  * 修改时间：2005年4月23日  * 作　　者：钟钟  * 邮箱地址：[email protected]  * 版权声明：本程序属于iClass.JS，版权归作者所有。  * 讨论地址：http://www.iecn.net/forum/showthread.php?threadid=16975  * 有关iClass计划详见：http://www.iecn.net/forum/showthread.php?threadid=14811  * =========================================================================  */ //构造ImageSlide类 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;   /**    * 播放切换效果说明    * --------------    *  0. 矩形缩小    *  1. 矩形扩大    *  2. 圆形缩小    *  3. 圆形扩大    *  4. 从下到上    *  5. 从上到下    *  6. 从左到右    *  7. 从右到左    *  8. 竖百叶窗    *  9. 横百叶窗    * 10. 错位横百叶窗    * 11. 错位竖百叶窗    * 12. 点扩散    * 13. 两边到中间    * 14. 中间到两边    * 15. 中间到上下    * 16. 上下到中间    * 17. 右下到左上    * 18. 右上到左下    * 19. 左上到右下    * 20. 左下到右上    * 21. 横条    * 22. 竖条    * 23. 随机    * --------------    */  }  else {   alert("请使用IE5或IE5以上版本的浏览器使用本程序！");  } } //加入一张或多张图片（传入一个或多个图片路径） //pushImg(sPath1 [, sPath2 [, sPath3 [, ...]]]) ImageSlide.prototype.pushImgs = function () {  for (var i = 0; i < arguments.length; i++)   this.imgs.push(arguments[i]); } //设置图片播放容器的长宽 ImageSlide.prototype.setSize = function (nWidth, nHeight) {  this.width = nWidth;  this.height = nHeight; } //设置图片播放容器的ID ImageSlide.prototype.setBoxId = function (sBoxId) {  this.boxId = sBoxId; } //设置是否自动播放 ImageSlide.prototype.setAutoPlay = function (bAutoPlay) {  this.autoPlay = bAutoPlay; } //设置自动播放的延时秒数 ImageSlide.prototype.setDelay = function (nSeconds) {  this.delay = nSeconds; } //设置播放的切换效果（0-23的整数） ImageSlide.prototype.setTransform = function (nTransform) {  this.transform = nTransform; } //显示 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 += "onclick='window.imageSlide.play();window.imageSlide.timerPlay();'";  else   boxStr += "onclick='window.imageSlide.play();'";  boxStr += "style='word-break:keep-all;width:100%;height:100%;background-color:#EEEEEE;'>";  if (this.autoPlay)   boxStr += "<br />　点击此处开始进行自动播放……";  else   boxStr += "<br />　点击此处开始播放，播放时单击播放下一张……";  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 += "<img src='" + this.imgs[i] + "' style='display:none;width:";   boxStr += this.width + ";height:" + this.height + "px;height:px;filter:";   boxStr += "revealTrans(transition=" + transform + ",duration=1);'";   if (!this.autoPlay)    boxStr += "' onclick='window.imageSlide.play();' alt='点击播放下一张'";   boxStr += " />";  }  boxStr += "</div>";  document.writeln(boxStr);  var box = document.getElementById(this.boxId);  this.first = box.childNodes[0];  this.frms = box.getElementsByTagName("IMG"); } //播放 ImageSlide.prototype.play = function () {  if (window.imageSlide.imgs.length) {   window.imageSlide.first.style.display = "none";   if (window.imageSlide.count >= window.imageSlide.imgs.length) {    alert("播放完毕！");    window.imageSlide.frms[window.imageSlide.count-1].style.display = "none";    window.imageSlide.first.style.display = "block";    window.imageSlide.first.innerHTML = "<br />　点击此处再次进行播放！";    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("你没有放入任何图片，无法进行播放！");  } } //连续播放 ImageSlide.prototype.timerPlay = function () {  this.timer = setInterval(this.play, this.delay * 1000); } //实例化一个ImageSlide对象imageSlide并将其做为window对象的一个子对象 window.imageSlide = new ImageSlide();