手机站
网通分站
电信主站
密 码:
用户名:
当前位置 : 主页>网页制作>Javascript>列表

Javascript图片播放类ImageSlide.iclass.js

来源:互联网 作者:west263.com 时间:2008-02-23
西部数码-全国虚拟主机10强!40余项虚拟主机管理功能,全国领先!双线多线虚拟主机南北访问畅通无阻!免费赠送企业邮局,.CN域名,自助建站480元起,免费试用7天,满意再付款! P4主机租用799元/月.月付免压金!

演示见此: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();

文章整理:西部数码--专业提供域名注册虚拟主机服务
http://www.west263.com
以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!