仿照常見的那個(gè)圖片變換flash做的效果，純js。不過濾鏡變換只對(duì)應(yīng)ie，ff只能看到一般的切換。這個(gè)js做的效果最早在sina看到，這里把這個(gè)效果封裝好方便使用。

效果：

[[77981]]

程序說明：

圖片未開始轉(zhuǎn)換時(shí)，由于沒有圖片會(huì)顯示一個(gè)紅x，所以隱藏圖片：

this._img.style.visibility = "hidden"; 

ps：以前我用this._img.src = "javascript:void(0);";但這個(gè)在ie8會(huì)出錯(cuò)。

這個(gè)變換效果需要濾鏡，所以只支持ie。要使用變換濾鏡，要先設(shè)置filter：

this._img.style.filter = "revealTrans()" 

變換之前先設(shè)置兩個(gè)參數(shù)Transition和Duration，分別是變換效果和持續(xù)時(shí)間，其中Duration是浮點(diǎn)數(shù)。

此外還有兩個(gè)屬性Enabled和Percent分別是是否激活濾鏡和當(dāng)前靜態(tài)濾鏡輸出在轉(zhuǎn)換進(jìn)程中所處的點(diǎn)。

設(shè)置完后還需要運(yùn)行apply和play方法，分別是應(yīng)用變換效果和運(yùn)行效果：

with(this._img.filters.revealTrans){  
    Transition = this.Transition; Duration = this.Duration; apply(); play();  
}  

除了這兩個(gè)方法還有一個(gè)stop方法用來停止效果。

下面列出所有效果和對(duì)應(yīng)Transition值（參考手冊）：

值 : 效果

0  : 矩形收縮轉(zhuǎn)換。

1  : 矩形擴(kuò)張轉(zhuǎn)換。

2  : 圓形收縮轉(zhuǎn)換。

3  : 圓形擴(kuò)張轉(zhuǎn)換。

4  : 向上擦除。

5  : 向下擦除。

6  : 向右擦除。

7  : 向左擦除。

8  : 縱向百葉窗轉(zhuǎn)換。

9  : 橫向百葉窗轉(zhuǎn)換。 

10 : 國際象棋棋盤橫向轉(zhuǎn)換。

11 : 國際象棋棋盤縱向轉(zhuǎn)換。

12 : 隨機(jī)雜點(diǎn)干擾轉(zhuǎn)換。

13 : 左右關(guān)門效果轉(zhuǎn)換。

14 : 左右開門效果轉(zhuǎn)換。

15 : 上下關(guān)門效果轉(zhuǎn)換。

16 : 上下開門效果轉(zhuǎn)換。

17 : 從右上角到左下角的鋸齒邊覆蓋效果轉(zhuǎn)換。

18 : 從右下角到左上角的鋸齒邊覆蓋效果轉(zhuǎn)換。

19 : 從左上角到右下角的鋸齒邊覆蓋效果轉(zhuǎn)換。

20 : 從左下角到右上角的鋸齒邊覆蓋效果轉(zhuǎn)換。

21 : 隨機(jī)橫線條轉(zhuǎn)換。

22 : 隨機(jī)豎線條轉(zhuǎn)換。

23 : 隨機(jī)使用上面可能的值轉(zhuǎn)換。

其中23比較特別，是隨機(jī)效果，程序默認(rèn)就是隨機(jī)效果。

設(shè)置完濾鏡效果后就修改圖片的src就開始轉(zhuǎn)換了。

然后設(shè)置鏈接：

!!list["url"] ? (this._a.href = list["url"]) : this._a.removeAttribute("href");  

要注意的是這里用removeAttribute去掉a的href才能去掉鏈接，如果只設(shè)為空那么鏈接還是去不掉的。

#p#

使用說明：

首先要實(shí)例化一個(gè)對(duì)象：

var rvt = new RevealTrans("idPicShow");  

idPicShow就是顯示變換的容器對(duì)象。

有以下這些可選參數(shù)和屬性：

屬性:默認(rèn)值//說明

Auto:  true,//是否自動(dòng)切換；Pause:  1000,//停頓時(shí)間(微妙)；Duration: 1,//變換持續(xù)時(shí)間(秒)；Transition: 23,//變換效果(23為隨機(jī))

List:  [],//數(shù)據(jù)集合,如果這里不設(shè)置可以用Add方法添加

onShow:  function(){}//變換時(shí)執(zhí)行

其中List是數(shù)據(jù)集合，其中每個(gè)元素結(jié)構(gòu)是這樣的：

{ img: 圖片url, text: 相關(guān)文本, url: 相關(guān)鏈接 } 

在使用時(shí)要注意，也可以在實(shí)例化之后用Add方法添加：

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

可以一個(gè)一個(gè)添加，這樣方便后臺(tái)用循環(huán)輸出數(shù)據(jù)。

至于圖片列表、按鈕和文本顯示區(qū)域是自己擴(kuò)展的部分，詳細(xì)請看實(shí)例。

全部設(shè)置完成后就可以用Start開始變換程序了：

rvt.Start(); 

程序代碼：

var RevealTrans = Class.create();  
RevealTrans.prototype = {  
  initialize: function(container, options) {  
    this._img = document.createElement("img");  
    this._a = document.createElement("a");  
      
    this._timer = null;//計(jì)時(shí)器  
    this.Index = 0;//顯示索引  
    this._onIndex = -1;//當(dāng)前索引  
      
    this.SetOptions(options);  
      
    this.Auto = !!this.options.Auto;  
    this.Pause = Math.abs(this.options.Pause);  
    this.Duration = Math.abs(this.options.Duration);  
    this.Transition = parseInt(this.options.Transition);  
    this.List = this.options.List;  
    this.onShow = this.options.onShow;  
      
    //初始化顯示區(qū)域  
    this._img.style.visibility = "hidden";//第一次變換時(shí)不顯示紅x圖  
    this._img.style.width = this._img.style.height = "100%"; this._img.style.border = 0;  
    this._img.onmouseover = Bind(this, this.Stop);  
    this._img.onmouseout = Bind(this, this.Start);  
    isIE && (this._img.style.filter = "revealTrans()");  
      
    this._a.target = "_blank";  
      
    $(container).appendChild(this._a).appendChild(this._img);  
  },  
  //設(shè)置默認(rèn)屬性  
  SetOptions: function(options) {  
    this.options = {//默認(rèn)值  
        Auto:        true,//是否自動(dòng)切換  
        Pause:        1000,//停頓時(shí)間(微妙)  
        Duration:    1,//變換持續(xù)時(shí)間(秒)  
        Transition:    23,//變換效果(23為隨機(jī))  
        List:        [],//數(shù)據(jù)集合,如果這里不設(shè)置可以用Add方法添加  
        onShow:        function(){}//變換時(shí)執(zhí)行  
    };  
    Extend(this.options, options || {});  
  },  
  Start: function() {  
    clearTimeout(this._timer);  
    //如果沒有數(shù)據(jù)就返回  
    if(!this.List.length) return;  
    //修正Index  
    if(this.Index < 0 || this.Index >= this.List.length){ this.Index = 0; }  
    //如果當(dāng)前索引不是顯示索引就設(shè)置顯示  
    if(this._onIndex != this.Index){ this._onIndex = this.Index; this.Show(this.List[this.Index]); }  
    //如果要自動(dòng)切換  
    if(this.Auto){  
        this._timer = setTimeout(Bind(this, function(){ this.Index++; this.Start(); }), this.Duration * 1000 + this.Pause);  
    }  
  },  
  //顯示  
  Show: function(list) {  
    if(isIE){  
        //設(shè)置變換參數(shù)  
        with(this._img.filters.revealTrans){  
            Transition = this.Transition; Duration = this.Duration; apply(); play();  
        }  
    }  
    this._img.style.visibility = "";  
    //設(shè)置圖片屬性  
    this._img.src = list.img; this._img.alt = list.text;  
    //設(shè)置鏈接  
    !!list["url"] ? (this._a.href = list["url"]) : this._a.removeAttribute("href");  
    //附加函數(shù)  
    this.onShow();  
  },  
  //添加變換對(duì)象  
  Add: function(sIimg, sText, sUrl) {  
    this.List.push({ img: sIimg, text: sText, url: sUrl });  
  },  
  //停止  
  Stop: function() {  
    clearTimeout(this._timer);  
  }  
}; 

下載完整程序

ps：由于有些綠色版ie6會(huì)把濾鏡功能去掉，所以用這類ie6會(huì)看不到效果的，用正宗版本就可以正常瀏覽了。

原文鏈接：http://www.cnblogs.com/cloudgamer/archive/2008/05/23/1205642.html

【編輯推薦】

1. JavaScript馬賽克遮罩圖片幻燈片切換類
2. 對(duì)開發(fā)者非常有用的JavaScript庫
3. 網(wǎng)易郵箱前端JavaScript編碼規(guī)范
4. javascript解決圖片縮放及其優(yōu)化
5. 看JavaScript如何實(shí)現(xiàn)頁面自適