用js實作點擊切換+自動切換的輪播圖

用js實作點擊切換+自動切換的輪播圖

之前博主寫過一篇用css實作輪播圖的文章,可以看到用css實作的輪播圖也能實作我們所需要的功能，那么這些功能用js該如何實作呢？我們一起來看下吧！

(ps:博主在用js寫輪播圖的程序中,在網上查閱了很多篇文章,但是沒有一篇是博主能徹底理解的[笨蛋QAQ]，所以這篇博客用來幫助像博主一樣沒有頭緒,看不懂網上部分教程的伙伴)，

首先我們要明白輪播圖的滑動原理,假設我們有裝著3張圖片的大盒子pic,那么我們可以采用定位或者浮動讓這3張圖片橫向排成一排,那么大家想一想我們是不是移動大盒子的左/右邊距就能顯示出相應的圖片呢？那么我們先來看一下代碼

HTML:

    <div class="box">
        <!-- 圖片 -->
        <ul id="pic">
            <li class="pic_items">1</li>
            <li class="pic_items">2</li>
            <li class="pic_items">3</li>
        </ul>
        <!-- 左右箭頭 -->
        <span id="lf">左</span>
        <span id="rt">右</span>
        <!-- 圓點 -->
        <ul id="cir">
            <li class="cir_items"></li>
            <li class="cir_items"></li>
            <li class="cir_items"></li>
        </ul>
    </div>

CSS:

	
        .box{
            overflow:hidden; 
            width:940px;
            height:100%;
            margin:0 auto;     
        }
        #pic{
            width:2820px;
            height: 500px;
        }
        .pic_items{
            width:940px;
            height:100%;
            float:left;
        }
        .pic_items:nth-child(1){
            background:pink;
        }
        .pic_items:nth-child(2){
            background: gray;
        }
        .pic_items:nth-child(3){
            background:green;
        }

這樣就完成了基本的輪播圖布局,那么我們再給輪播圖添加上圓點和左右切換按鈕,一個靜態樣式的輪播圖就完成了，（注意這里要給大盒子開啟定位:position:relative;）

CSS

        .box{
            position:relative;
            overflow:hidden; 
            width:940px;
            height:100%;
            margin:0 auto;     
        }
                /* 箭頭 */
        span{
            position:absolute;
            width:50px;
            height:100px;
            background:black;
            color:#fff;
            text-align:center;
            line-height:100px;
            cursor: pointer;
        }
        #lf{
            left:0;
            top:50%;
        }
        #rt{
            right:0;
            top:50%;
        }
        /* 圓點 */
        #cir{
            position:absolute;
            bottom:20px;
            right:100px;
            width:100px;
            height:20px;
        }
        .cir_items{
            width:20px;
            height:20px;
            border-radius:10px;
            background:#fff;
            float: left;
            margin-right:10px;
            cursor: pointer;
        }

接下來就到了最重要的js部分，根據之前的思路,我們是不是只需要設定大盒子pic的距離,就可以實作相應圖片的切換對吧.那么我們先寫出這部分代碼：

JS:

        // 獲取圖片id
        var pic = document.getElementById('pic');
        var picItems = document.getElementsByClassName('pic_items');
        // 獲取左右箭頭id
        var lf = document.getElementById('lf');
        var rt = document.getElementById('rt');
        // 獲取圓點
        var cirItems = document.getElementsByClassName('cir_items');
        // 索引
        var index = 0;
        // 實作移動功能的函式
        function change(){  
            pic.style.marginLeft = -index*940+"px";
        }

這個時候我們去運行程式,發現沒有什么效果,為什么呢，那么大家想一想,我們的圖片是不是有3張啊,index表示的我們圖片的索引，
從0開始，那么在以上的代碼中是不是index=0；僅僅顯示的是第一張圖片，所以我們要想辦法改變index的值,才能顯示出我們想要顯示的圖片，我們可以給change（）函式傳入的一個引數i，這個i就表示我們想要顯示的圖片，
那我們再想一想，圖片只有3張,如果i=4，那么這個我們沒有第4張圖該怎么辦呢，是不是可以讓圖片從頭顯示啊，也就是說如果傳入的引數i超過了我們的圖片總張數,我們可以讓圖片從頭開始顯示，反之,如果圖片小于我們第一張圖片的索引，我們可以讓圖片從最后一張圖開始顯示，

JS：

        // 實作移動功能的函式
        function change(i){
            index = i;    
            if(i > picItems.length-1){
                index = 0;
            }
            if(i < 0){
                index = picItems.length - 1;
            }
            pic.style.marginLeft = -index*940+"px";
        }

這樣我們算是完成了代碼的核心功能部分,那么接下來我們開始實作左右切換功能，僅僅需要在進行左右點擊的時候傳入相應的引數i就行了，

        // 左切換
        lf.onclick = function(){
            change(--index);
        }
        // 右切換
        rt.onclick = function(){
            change(++index); 
        } 

接著我們進行圓點的切換,思路很簡單,我們在點擊第一個圓點時，切換到第一張圖,只需要把change（）函式中的引數i和我們的當前的圓點索引對應起來就行了，

        // 圓點切換:let的作用域是整個代碼塊,因此可避免使用閉包
        for(let i=0;i<cirItems.length;i++){
            cirItems[i].onclick = function(){
                index = i;
                change(index);
            }
        }

最后,我們只需要給change（）函式里面添加一個計時器，實作自動輪播就可以了，但是不要忘記清楚計時器哦

        var timer;
        // 實作移動功能的函式
        function change(i){
            index = i;    
            if(i > picItems.length-1){
                index = 0;
            }
            if(i < 0){
                index = picItems.length - 1;
            }
            clearTimeout(timer);
            pic.style.marginLeft = -index*940+"px";
            timer = setTimeout(function(){change(++index);},2000);
        }

以上就完成了點擊切換和自動切換的效果，可以看一下效果圖，大家可以給左邊距添加以下過渡屬性，這樣會更自然一點，以下是效果圖(未添加過渡屬性)