Javascript图片播放类ImageSlide.iclass.js

最新推荐文章于 2021-06-08 18:27:06 发布

原创最新推荐文章于 2021-06-08 18:27:06 发布 · 873 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #function #transition #div #object #浏览器

JS 专栏收录该内容

31 篇文章

订阅专栏

ImageSlide.js 是一款基于 IE5 及以上版本的浏览器开发的图片轮播插件，支持多种过渡效果及自动播放功能。该插件提供了丰富的自定义选项，如图片播放容器的尺寸、自动播放的延时等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

演示见此：http://www.iecn.net/iclass/js/ImageSlide/
打开后，右健，查看源码即可看到调用的实例。

源码如下：

/**
* =========================================================================
* 本程序可自由复制、修改、传播，不得删除以下信息。如用于商业用途须经原作者同意方可使用。
* =========================================================================
* 程序名称：ForceWindow(@iClass.JS)
* 描　　述：网页上的图片幻灯片。
* 版　　本：1.0.0
* 创建时间：2005年4月23日
* 修改时间：2005年4月23日
* 作　　者：钟钟
* 邮箱地址：zhong@iecn.net
* 版权声明：本程序属于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("你没有放入任何图片，无法进行播放！");
}
}