演示见此: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 = " boxStr += "id='" + this.boxId + "'> "; 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 += " 点击此处开始进行自动播放……"; else boxStr += " 点击此处开始播放,播放时单击播放下一张……"; boxStr += " 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 += " if (!this.autoPlay) boxStr += "' onclick='window.imageSlide.play();' alt='点击播放下一张'"; boxStr += " />"; } boxStr += " 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 = " 点击此处再次进行播放!"; 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(); |
|小黑屋|最新主题|手机版|微赢网络技术论坛 ( 苏ICP备08020429号 )
GMT+8, 2024-9-29 19:31 , Processed in 0.235312 second(s), 12 queries , Gzip On, MemCache On.
Powered by Discuz! X3.5
© 2001-2023 Discuz! Team.