js原生選項卡（自動播放無縫滾動輪播圖）二

今天分享一下自動播放輪播圖，自動播放輪播圖是在昨天分享的輪播圖的基礎上添加了定時器，用定時器控制圖片的自動切換，函數中首先封裝一個方向的自動播放工能的小函數，這個函數中添加定時器，定時器中可以放向右走的代碼，也可以放向左走的代碼，然后在js加載的時候先執行一次，保證頁面加載的時候輪播圖是自動播放的，當然在鼠標懸停在遮罩層的時候我們需要清除這個定時器，讓自動播放功能關閉，然后在鼠標再次移出遮罩層的時候再次開啟定時器，這樣就實現了自動播放的功能。
然后今天的輪播圖中我添加了開關的功能，這個開關是為了避免不停的快速點擊切換圖片時上一個move還沒執行完畢然后下一個move再次開啟的bug。開關的思路是在函數開始執行之前創造一個false，然后在函數剛開始的時候利用if判斷配合布爾值的false實現開的功能，當代買執行過這個關馬上讓布爾值變為true，從而繼續執行代碼，在函數全部執行完畢的時候再返回為false；

下面分享代碼

html代碼：

    <div id="tab">
        <ul>
            <li><img src="img/4.jpg" alt=""></li>
            <li><img src="img/0.jpg" alt=""></li>
            <li><img src="img/1.jpg" alt=""></li>
            <li><img src="img/2.jpg" alt=""></li>
            <li><img src="img/3.jpg" alt=""></li>
            <li><img src="img/4.jpg" alt=""></li>
            <li><img src="img/0.jpg" alt=""></li>
        </ul>
        <div id="cont">
            <div class="pre"><span>向左</span></div>
            <div class="next"><span>向右</span></div>
            <ol>
                <li class="on"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </div>
    </div>

　　

css代碼：

      *{
            padding: 0;
            margin: 0;
            list-style:none;
        }
        #tab{
            width: 300px;
            height: 172px;
            position:relative;
            margin:100px auto;
            overflow:hidden;
        }
        #tab ul{
            width:2100px;
            overflow:hidden;
            position:absolute;
            top: 0;
            left: 0px;
        }
        #tab ul li{
            width: 300px;
            float:left;
        }
        #tab ul li img{
            width: 300px;
        }
        #cont{
            width: 300px;
            height: 172px;
            position:absolute;
            top:0;
            left: 0;
        }
        #cont div{
            width: 150px;
            height: 100%;
            float:left;
            display:none;
        }
        #cont div span{
            width: 40px;
            height: 40px;
            background:rgba(0,0,0,0.2);
            text-align:center;
            line-height: 40px;
            font-size:20px;
            color:#fff;
            position:absolute;
            top:50%;
            margin-top:-20px;
        }
        #cont .pre span{
            left:0;
        }
        #cont .next span{
            right:0;
        }
        #cont ol{
            width: 100px;
            position:absolute;
            left: 100px;
            bottom:10px;
        }
        #cont ol li{
            width: 10px;
            height: 10px;
            background:#ccc;
            border-radius:50%;
            margin:5px;
            float:left;
        }
        #cont ol .on{
            background:red;
        }

　　

js代碼：

 window.onload=function(){
            var oTab=document.getElementById('tab');
            var oUl=oTab.getElementsByTagName('ul')[0];
            var aLi=oUl.children;
            var oCont=document.getElementById('cont');
            var oBtn=oCont.getElementsByTagName('div');
            var oBar=oCont.getElementsByTagName('ol')[0];
            var aC=oBar.children;
            var timer=null;
            var bReady=false;

            //定位ul的初始位置
            var iNow=1;
            oUl.style.left=-aLi[0].offsetWidth*iNow+'px';

            //當鼠標移入遮罩層，按鈕顯示，移出遮罩層，按鈕消失
            oCont.onmouseover=function(){
                clearInterval(timer);
                oBtn[0].style.display='block';
                oBtn[1].style.display='block';
            };
            //當鼠標移出的時候開啟定時器讓ul自動向前運動
            oCont.onmouseleave=function(){
                setInterval(domove,2000);
                oBtn[0].style.display='none';
                oBtn[1].style.display='none';
            };
            //把運動封成一個函數，向前向后只是改變iNow的值和判斷終點位置
            function domove(){
                if(bReady){return}
                bReady=true;
                iNow--;
                move(oUl,{left:-aLi[0].offsetWidth*iNow},{"complete":function(){
                    if(iNow==0){
                        iNow=aLi.length-2;
                        oUl.style.left=-aLi[0].offsetWidth*iNow+'px';
                    }
                    for(var i=0;i<aC.length;i++){
                        aC[i].className='';
                    }
                    aC[iNow-1].className='on';
                    bReady=false;
                }});
            }

　　

同樣的，這個自動播放輪播圖應用了我自己封裝的move函數，這個move函數需要提前引入，move函數我已經分享到上一篇文章中；

明天會繼續分享手機端的拖拽選項卡；

Improve myself little by little every day!