思洋互动网站建设学前班

使用说明：

首先要实例化一个对象：

1. var rvt = new RevealTrans("idPicShow");  

idPicShow就是显示变换的容器对象。

有以下这些可选参数和属性：

属性:默认值//说明

Auto:  true,//是否自动切换；Pause:  1000,//停顿时间(微妙)；Duration: 1,//变换持续时间(秒)；Transition: 23,//变换效果(23为随机)

List:  [],//数据集合,如果这里不设置可以用Add方法添加

onShow:  function(){}//变换时执行
广州网站建设,网站建设,广州网页设计,广州网站设计

其中List是数据集合，其中每个元素结构是这样的：

1. { img: 图片url, text: 相关文本, url: 相关链接 } 

在使用时要注意，也可以在实例化之后用Add方法添加：

1. rvt.Add('http://images.51cto.com/files/uploadimg/20120601/1019570.jpg', '图片变换效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/05/23/1205642.html');  
2.  

可以一个一个添加，这样方便后台用循环输出数据。

至于图片列表、按钮和文本显示区域是自己扩展的部分，详细请看实例。 全部设置完成后就可以用Start开始变换程序了：

1. rvt.Start(); 

程序代码：

1. var RevealTrans = Class.create();  
2. RevealTrans.prototype = {  
3.   initialize: function(container, options) {  
4.     this._img = document.createElement("img");  
5.     this._a = document.createElement("a");  
6.       
7.     this._timer = null;//计时器  
8.     this.Index = 0;//显示索引  
9.     this._onIndex = -1;//当前索引  
10.       
11.     this.SetOptions(options);  
12.       
13.     this.Auto = !!this.options.Auto;  
14.     this.Pause = Math.abs(this.options.Pause);  
15.     this.Duration = Math.abs(this.options.Duration);  
16.     this.Transition = parseInt(this.options.Transition);  
17.     this.List = this.options.List;  
18.     this.onShow = this.options.onShow;  
19.       
20.     //初始化显示区域  
21.     this._img.style.visibility = "hidden";//第一次变换时不显示红x图  
22.     this._img.style.width = this._img.style.height = "100%"; this._img.style.border = 0;  
23.     this._img.onmouseover = Bind(this, this.Stop);  
24.     this._img.onmouseout = Bind(this, this.Start);  
25.     isIE && (this._img.style.filter = "revealTrans()");  
26.       
27.     this._a.target = "_blank";  
28.       
29.     $(container).appendChild(this._a).appendChild(this._img);  
30.   },  
31.   //设置默认属性  
32.   SetOptions: function(options) {  
33.     this.options = {//默认值  
34.         Auto:        true,//是否自动切换  
35.         Pause:        1000,//停顿时间(微妙)  
36.         Duration:    1,//变换持续时间(秒)  
37.         Transition:    23,//变换效果(23为随机)  
38.         List:        [],//数据集合,如果这里不设置可以用Add方法添加  
39.         onShow:        function(){}//变换时执行  
40.     };  
41.     Extend(this.options, options || {});  
42.   },  
43.   Start: function() {  
44.     clearTimeout(this._timer);  
45.     //如果没有数据就返回  
46.     if(!this.List.length) return;  
47.     //修正Index  
48.     if(this.Index < 0 || this.Index >= this.List.length){ this.Index = 0; }  
49.     //如果当前索引不是显示索引就设置显示  
50.     if(this._onIndex != this.Index){ this._onIndex = this.Index; this.Show(this.List[this.Index]); }  
51.     //如果要自动切换  
52.     if(this.Auto){  
53.         this._timer = setTimeout(Bind(this, function(){ this.Index++; this.Start(); }), this.Duration * 1000 + this.Pause);  
54.     }  
55.   },  
56.   //显示  
57.   Show: function(list) {  
58.     if(isIE){  
59.         //设置变换参数  
60.         with(this._img.filters.revealTrans){  
61.             Transition = this.Transition; Duration = this.Duration; apply(); play();  
62.         }  
63.     }  
64.     this._img.style.visibility = "";  
65.     //设置图片属性  
66.     this._img.src = list.img; this._img.alt = list.text;  
67.     //设置链接  
68.     !!list["url"] ? (this._a.href = list["url"]) : this._a.removeAttribute("href");  
69.     //附加函数  
70.     this.onShow();  
71.   },  
72.   //添加变换对象  
73.   Add: function(sIimg, sText, sUrl) {  
74.     this.List.push({ img: sIimg, text: sText, url: sUrl });  
75.   },  
76.   //停止  
77.   Stop: function() {  
78.     clearTimeout(this._timer);  
79.   }  
80. }; 

下载完整程序

ps：由于有些绿色版ie6会把滤镜功能去掉，所以用这类ie6会看不到效果的，用正宗版本就可以正常浏览了。