原创的图片播放类:ImageSlide.iclass.js

原创 2005年04月24日 03:53:00

演示见此: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("你没有放入任何图片,无法进行播放!");
 }
}

//连续播放
ImageSlide.prototype.timerPlay = function () {
 this.timer = setInterval(this.play, this.delay * 1000);
}

//实例化一个ImageSlide对象imageSlide并将其做为window对象的一个子对象
window.imageSlide = new ImageSlide();

Javascript图片播放类ImageSlide.iclass.js

关键字:Javascript 图片 播放 类 ImageSlide.iclass.js ...
  • shanliwa
  • shanliwa
  • 2007年09月28日 09:41
  • 543

百度识图 图片的伪原创 【防图片侵权】

经初步测试,Google的图片识别能力强于百度,但Google在国内的使用不便,被弱化,故以百度为重点进行检验。      先从网上随机下载一“美女”图片,然后,用系统自带的“画图”软件及“美图秀...
  • QQ39921050
  • QQ39921050
  • 2014年11月22日 09:08
  • 1737

通过图像转换软件打造95%原创文章--真的可以告别伪原创(有点扯)

通过图像转换软件打造95%原创文章--真的可以告别伪原创   满大街都在吆喝,SEO优化什么最重要?“内容为王,外链为皇”。。。对,我也是这么认为的,可是能每天坚持写原创的又有几个呢?我相信我这篇文...
  • wuxinliulei
  • wuxinliulei
  • 2013年08月27日 13:09
  • 1033

聚合类新闻客户端初体验

初体验的产品:今日头条(ios3.6)、百度新闻(ios4.4.0)、ZAKER(ios4.4.5)、鲜果(ios3.8.7)、中搜搜悦(ios4.0.1)、Flipboard(ios2.3.9)...
  • tayanxunhua
  • tayanxunhua
  • 2014年11月13日 00:38
  • 2582

【伪原创工具】最好的伪原创工具

【伪原创工具】最好的伪原创工具,原创,这个对个人站长来说,几乎不可能,因为没有那么多时间和精力去搞,一般是大站招聘编辑来做这个工作。 靠采集更新网站,早年在火车头采集出现之前还有用,因为在火车头出来...
  • i_like_cpp
  • i_like_cpp
  • 2011年10月10日 18:54
  • 5654

DICK原创:Rendering an IHTMLElement to a Image File Using GDI+

我最新发表在codeproject上的文章:http://www.codeproject.com/vcpp/gdiplus/WebPageSnapshot.asp...
  • RichardSundusky
  • RichardSundusky
  • 2006年12月05日 14:46
  • 2011

手把手教你玩转QQ的原创表情

QQ的原创表情非常的可爱,做得比较精致,深受广大QQ用户的喜爱;但怎么将这些表情保存下来,好让我可以在别的地方用呢? 乖乖牛在线将从不同的视角,为你解析QQ原创表情的存储、互通、保护的机制;熟悉了这些...
  • TragicGuy
  • TragicGuy
  • 2015年10月23日 13:58
  • 1292

原生JS实现图片的轮流播放

网页展示中常用到图片的轮流播放,这里使用了四张长图来进行图片轮放,下面是代码: f7.html MyProject srh ...
  • sinat_27747695
  • sinat_27747695
  • 2017年09月08日 23:34
  • 221

【伪原创工具】伪原创工具有用吗?

伪原创工具有用吗?难道伪原创就行不通吗?并不是的,真正的通过人工来操作的伪原创,比如把几篇常见的一样性质内容的文章进行重新组合,这样还是有效果的,不过需要手工编辑修改很多地方才有效果,如果简单的比几篇...
  • i_like_cpp
  • i_like_cpp
  • 2011年11月12日 19:26
  • 1676

QT打开图片文件夹快速播放图片

1. 打开文件夹 void MainWindow::open() { QFileDialog* fd = new QFileDialog(this); fd->setWindow...
  • casun_li
  • casun_li
  • 2017年04月10日 10:00
  • 830
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:原创的图片播放类:ImageSlide.iclass.js
举报原因:
原因补充:

(最多只允许输入30个字)