原生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里面的，但是測試過程中發現事件只會觸發一次，所以導致輪播不能執行，所以選擇在重新寫了一個方法。第二個就是對於函數的傳參問題，我寫函數一直沒有傳參的習慣，都是匿名函數，雖然知道適用場景不同，對函數的運用應該靈活，可能是因為做的項目太少，經驗還是太不足，第三個就是細節方面，例如移入時清除定時器，輪播要先執行一次等。總之收獲還是很大的。

感謝閱讀。