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();