原生JavaScript實現焦點圖輪播

　　不管是高校的網站還是電商的頁面，焦點圖的切換和輪播應該是一項不可或缺的應用。今天把焦點圖輪播制作的技術要點做下筆記，以供日后查看。

 

一、結構層（HTML）

　　焦點圖的HTML結構很簡單，就是一個父容器（id=box），包含三個子容器，分別存放圖片（id=pics）、底部按鈕（id=dots）、作用切換箭頭（class=turn）。加上樣式后就是下圖二的布局。

                  

二、表示層（CSS）

　　頁面的表現和風格總是離不開CSS。為敘述方便，后面采用id選擇符名或類選擇符名代表各div模塊。

1.box

　　box作為父容器，是整個焦點圖輪播結構在網頁的直觀表現，它的寬高就是要顯示的圖片的寬高。我將圖片設置為寬600px、高400px，使父容器box居中顯示，並加了陰影。樣式大概都可以隨自己愛好設置，但溢出一定要隱藏，定位一定要設置為相對定位，以使子容器的絕對定位准確。

#box{
    width: 600px;
    height: 400px;
    margin-top: 100px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    position: relative;
    box-shadow: 10px 10px 5px #888;
}

 2.pics

 　　pics用於放置圖片，因為是制作左右切換功能，高仍是一張圖片的高，但寬=（展示的圖片數量+2）*圖片寬，原因在行為層再說明。

　　另外需要注意的是，由展示圖片可知，pics在左右切換箭頭和底部切換按鈕的下層，所以z-index要設為1。

#pics{
    width: 5400px;
    height: 400px;
    position: absolute;
    z-index: 1;
}

 

3.dots

　　z-index設為2，置為上層顯示；定位為絕對定位；其他樣式隨喜好。這里我設置了鼠標滑過的樣式，以及配合js對應圖片位置改變的樣式（on）。

#dots{
    width: 120px;
    height: 10px;
    position: absolute;
    bottom: 25px;
    left: 40%;
    z-index: 2;
}

#dots span{
    width: 10px;
    height: 10px;
    float: left;
    margin-right: 5px;
    background: #333;
    border: solid 1px #FFF;
    border-radius: 50%;
    cursor: pointer;
}

#dots .on{background: orangered;}
#dots span:hover{background: orangered;}

 

 4.turn

　　左右箭頭的重要樣式與dots一致，其他自定義。這里我設置了鼠標滑過box，才顯現箭頭。

.turn{
    width: 40px;
    height: 40px;
    color: #fff;
    background: orangered;
    line-height: 39px;
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    opacity: 0.5;
    position: absolute;
    top: 180px;
    display: none;
    z-index: 2;
    cursor: pointer;
}
.turn:hover{opacity: 0.8;}
#box:hover .turn{display: block;}

 

　　至此頁面的樣式和布局完成，但行為層方法和功能的實現才是重點。

　　

三、行為層（JavaScript）

　　定義函數前，先在全局作用域中獲得頁面的節點。

var box = document.getElementById('box');
var pics = document.getElementById('pics');
var dots = document.getElementById('dots').getElementsByTagName('span');
var pre = document.getElementById('pre');
var next = document.getElementById('next');

1.圖片切換動畫　　

　　輪播圖的核心方法，在於圖片的切換動畫。而此函數的重點，是接收一個位移量offset，然后改變pics相對於box的left值，從而對圖片進行顯示。

　　之前CSS設置的，box的寬為600px，但pics的寬卻為5400px，由於box溢出隱藏，所以頁面只會顯示一張圖片；通過接收具體位移量offset，改變left值（減去或加上n個圖片寬度），就可以改變顯示的圖片。

　　此外還有兩個問題，如果不設置圖片切換的速度，圖片就會整張整張的變換，沒有進入切換的效果；而且如果不停的點擊切換，就會消耗太多的內存造成電腦卡機，出現頁面停在前一張圖未切換完就出現下一張等情況。所以要對圖片做一個速度處理，以及一張圖片為切換完就不允許其他切換的設置。

    //圖片切換函數
    function turn(offset){ 
        turned = true;                                      //切換允許標志，在全局作用域中定義，true表示關閉允許切換
        var new_left = parseInt(pics.style.left) + offset;  //最后left值
        var total_time = 300;                               //位移總時間
        var interval = 10;                                  //每次位移間隔時間
        var speed = offset/(total_time/interval);           //位移速度——每次位移量

        function go(){
            if((speed < 0 && parseInt(pics.style.left) > new_left) || (speed > 0 && parseInt(pics.style.left) < new_left)){ //右切||左切
                pics.style.left = parseInt(pics.style.left) + speed +'px';
                setTimeout(go,interval);
            }else{
                turned = false;     //已切換完畢，開啟允許切換
                pics.style.left = new_left +'px';
                if( new_left < -4200){
                    pics.style.left = -600 +'px';
                }
                else if( new_left > -600){
                    pics.style.left = -4200 +'px';
                }
            }
        }
        go();
    }

2.箭頭切換

　　在圖片切換函數turn()基礎上傳入參數。因為是左右切換，所以每次直接傳入一個圖片寬度。向右切換傳入-600，左切傳入600。

　　這里要注意的就是，圖片與底部按鈕的同步，到兩邊的最后一張后參數的重置，以及是否允許切換的判斷。

    //箭頭切換實現
    next.onclick = function(){
        if(index == 7){
            index = 1;
        }else{
            index += 1;
        }
        show_dots();
        if(!turned){
            turn(-600);
        }
    };
    pre.onclick = function(){
        if(index == 1){
            index = 7;
        }else{
            index -= 1;
        }
        show_dots();
        if(!turned){
            turn(600);
        }
    };

3.底部按鈕實現

　　按鈕與箭頭的不同，在於點擊它可以切換到任意一張圖片，所以在對切換函數turn()傳入參數前要先做一個計算。另外按鈕對應樣式的變化也不能忘記。

    //按鈕切換樣式
    function show_dots(){
        for(var i = 0; i < dots.length; i++){
            if(dots[i].className == 'on'){
                dots[i].className = '';
                break;
            }
        }
        dots[index - 1].className = 'on';
    }
    //按鈕切換實現
    for(var i = 0; i < dots.length; i++){
        dots[i].onclick= function(){
            if(this.className == 'on'){
                return;
            }
            var my_index = parseInt(this.getAttribute('index'));   //注意! index是自定義屬性
            var offset = -600 * (my_index - index);　　　　　　　　　//計算切換位移量

            if(!turned){
                turn(offset);
            }
            index = my_index;
            show_dots();
        }
    }

4. 自動播放

　　自動播放自然就是設置定時器和清除定時器的問題，這里不再贅述。

    //定時動畫
    function play(){
        time = setInterval(function(){
            next.onclick();
        },3000);     
    }
    //動畫停止
    function stop(){clearInterval(time);}

    play();
    box.onmouseover = stop;
    box.onmouseout = play;

 

最后附上demo和源碼鏈接：demo、源碼。