這是前陣子寫的2款原生JS輪播，一個是漸變輪播預(yù)覽，一個是滾動輪播預(yù)覽，現(xiàn)在補充博文總結(jié)。

漸變輪播

因為是梳理自己的思路，以下內(nèi)容不貼代碼，具體效果和代碼見Github，可能有更好更簡潔的寫法，希望互相指正。
預(yù)覽效果 源碼地址
兼容性：IE7及以上，火狐和谷歌等主流瀏覽器

HTML&CSS

1. 最外面1個總?cè)萜?code>#ad，里面放1個圖片容器#list，1個按鈕容器#btns，2個箭頭#prev和#next；#ad相對定位，其他相對于#ad絕對定位。
2. 所有圖片都是絕對定位，會重疊在一起，默認z-index:0；給選中的圖片和按鈕分別設(shè)置class為selected和on，其中選中圖片的z-index:1，才會出現(xiàn)在頂層。

JS

1. 手動輪播：把選中圖片和按鈕添加相應(yīng)類名selected和on，把原來選中的按鈕和圖片取消相應(yīng)類名。需要用循環(huán)，把所有按鈕都遍歷一遍，并且給每個按鈕都定義一個索引index值。其中，需要判斷選中當(dāng)前已選中的，則不操作。
2. 自動輪播。函數(shù)nextPic用于實現(xiàn)下一張圖片，設(shè)置一個定時器，每隔一定時間就執(zhí)行一次函數(shù)nextPic。注意處理移動到最后一張和第一張
3. 注意：鼠標(biāo)移入按鈕時，自動輪播應(yīng)該暫停；鼠標(biāo)移出按鈕時，自動輪播應(yīng)該繼續(xù)，且給一個當(dāng)前的索引，告訴自動輪播從哪里開始播。
4. 修改代碼：將第1步和第2步中代碼相似的部分合并寫為一個函數(shù)show()
5. 將圖片和左右箭頭鼠標(biāo)懸停時清除計時器，寫成函數(shù)pause，將圖片和左右箭頭鼠標(biāo)離開時重啟計數(shù)器，寫成函數(shù)restart
6. 給向左箭頭寫一個函數(shù)prevPic，用于顯示上一張圖片
7. 設(shè)置左右箭頭的開始和暫停
8. 為了實現(xiàn)切換時的透明度漸變效果，需要給圖片設(shè)置transition屬性。只設(shè)置selected的話則會出現(xiàn)白底漸變效果，需要給所有圖片也設(shè)置默認的transition屬性。但只兼容IE10及以上，因為IE9不支持transition屬性

兼容IE9及以下

因為IE9不支持transition屬性，嘗試用js實現(xiàn)漸入漸出，思路如下：

1. 寫透明度變化函數(shù)

function setOpacity(elem,level){
    if(elem.filters){ //IE9及以下有這個屬性
        elem.style.filter="alpha(opacity="+level+")";
    }else{
        elem.style.opacity=level/100;
    }
}

2. 透明度變化是動態(tài)的，隔一段時間就要變化，首先想到用setInterval

function fade_In(elem){
    setOpacity(elem,0); //初始透明
    var level=0;
    setInterval(function(){
        if(level<=95){
            level+=5;
            setOpacity(elem,level);
            console.log(level);
        }
    }, 300);
}

3. 也可以用setTimout，感覺比較繞（挺有意思的，值得深究）。先考慮用循環(huán)，注意循環(huán)內(nèi)的匿名函數(shù)問題，可以用括號的方法自執(zhí)行。

//淡入效果
function fadeIn(elem){
    setOpacity(elem,0); //初始透明
    for(var i=0;i<=20;i++){
        (function(){
            var level=i*5;
            //try 1
            //console.log(level); //測試用，會一次性全部依次輸出，如L61
            //setOpacity(elem,level);  //如果這樣寫，而不用L54的setTimeout的話是無效的，會一次性地全部實現(xiàn)，沒有動畫效果。

            //try 2
            /*if(level<=100){
                console.log(level);
                setInterval(setOpacity(elem,level), 300);  //每隔一定時間就執(zhí)行依次函數(shù)，但這里level已經(jīng)是100了。應(yīng)該是每隔一段時間就變化level。另外寫一個。
            }*/

            //正確：
            setTimeout(function(){
                setOpacity(elem,level)
            }, i*300);   //于是用setTimeout：i=0，間隔為0時，level=0；i=1，間隔為300時，level=5，依次……從而實現(xiàn)漸變。
        })(i);  //傳入?yún)?shù)i，函數(shù)立即執(zhí)行，會依次執(zhí)行21次
    }
}

4. 注意漸出的函數(shù)，容易寫錯，如下：

//淡出效果1：錯誤，實際是淡入效果
function fade_Out(elem){
    for(var i=20;i>=0;i--){
        (function(){
            var level=i*5;  //level從100到0
            setTimeout(function(){
                setOpacity(elem,level);
                //console.log(level); //測試用，這里卻是從0到100
            }, i*300);
            //因為i=0時，即間隔時間為0，level=0；i=20，即間隔時間為6000，level=100。雖然for循環(huán)是從大到小，但setTimeout執(zhí)行卻是按照間隔時間的順序的。所以實際上是淡入效果。
        })(i);
    }
}

正確的如下：

//淡出效果2：正確
function fadeOut(elem){
    for(var i=0;i<=20;i++){
        (function(){
            var level=100-i*5; //level從100到0
            setTimeout(function(){
                setOpacity(elem,level)
            }, i*300);
        })(i);
    }
}

5. 在show函數(shù)里添加漸入和漸出，第一輪輪播切換時會出現(xiàn)第5張圖閃一下再切換到目標(biāo)圖片，后面幾輪輪播就不會了———因為CSS中沒有設(shè)置默認透明度為0，選中透明度為1，切換的時候原來選中的一下子就變到底層了，所以會有第5張閃現(xiàn)。

6. P.S.由于本例中嘗試用setTimeout寫漸出時的出錯，引發(fā)的問題如：循環(huán)中的匿名函數(shù)問題，setTimeout的多次執(zhí)行，另外補充博文分析。

滾動輪播

明天繼續(xù)。