原生JS實現幻燈片輪播效果

在以往的認知中，一直覺得用原生JS寫輪播是件很可貴事情，今天上班仿照網上的寫了一個小demo。小試牛刀。

大體效果：

html結構很簡單，兩個列表，一個表明圖片列表，一個是右下角序號列表。

<div id="box">
    <ul class="list">
        <li><img src="01.jpg" width="490" height="170" /></li>
        <li><img src="02.jpg" width="490" height="170" /></li>
        <li><img src="03.jpg" width="490" height="170" /></li>
        <li><img src="04.jpg" width="490" height="170" /></li>
        <li><img src="05.jpg" width="490" height="170" /></li>
    </ul>
    <ul class="count">
        <li class="current">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>

佈局的大體想法是圖片所有絕對定位重合，透明度爲1，右下角序號給選中的添加樣式。樣式都很簡單。

關於JS方面，本身仍是捉摸了好久，剛開始實現時，當鼠標移入右下角對應序列號時圖片可以準時切換，可是鼠標移出時便不能自動播放，關於setInterval和clearInterval本身的處理仍是不是很好。借鑑了網上的案列以後，具體的實現邏輯簡單爲，先寫一個圖片的展示方法，和鼠標移出圖片時的定時函數。這樣能夠在事件中直接調用，值得注意的一點就是在鼠標移入時，記得清除定時器。下面上代碼：

這是圖片展現函數，參數爲當前的展現的index。先讓全部圖片透明度爲0；全部下標沒有樣式，而後給當前的加上樣式，透明度爲1；

   function show(a){
        for(var i=0;i<oLi.length;i++){
            oLi[i].style.opacity= 0;
            oImg[i].className = '';
        }
        oLi[a].style.opacity = 200;
        oImg[a].className = 'current';
    }

而後寫一個鼠標移除時的定時器，圖片自動輪播函數：

   function autoplay(){
        time = setInterval(function(){
            b++;
            if(b>=oImg.length){
                b=0;
            }
            show(b);
        },1000);
    }
    autoplay();//自動運行

最後是鼠標移入移出事件：

 for(var i=0;i<oImg.length;i++){
        oImg[i].index = i;
        oImg[i].onmouseover=function(){
            clearInterval(time);
            show(this.index)
        }
        oImg[i].onmouseout=function(){
            autoplay();
        }
    }

代碼只是寫了一個結構骨架，實現大體效果，具體能夠優化的地方還有不少，對於動效方面能夠對透明度的改變設置一個函數，讓透明度緩慢變成1，或者對圖片的定位和移動方向進行改變，實現真正意義上的左右輪播。大體原理都是差很少的。

原生JS實現輪播，於我而言仍是有點小難度的，由於JS寫的比較少，因此對於總體的邏輯把握很差，雖有曲折，可是靠着本身也是寫了出來。

總結一些輪播遇到的大體困難，第一個是對於鼠標移出時的定時自動輪播，剛開始本身是寫在事件onmouseout裏面的，可是測試過程當中發現事件只會觸發一次，因此致使輪播不能執行，因此選擇在從新寫了一個方法。第二個就是對於函數的傳參問題，我寫函數一直沒有傳參的習慣，都是匿名函數，雖然知道適用場景不一樣，對函數的運用應該靈活，多是由於作的項目太少，經驗仍是太不足，第三個就是細節方面，例如移入時清除定時器，輪播要先執行一次等。總之收穫仍是很大的。

感謝閱讀。