關於焦點輪播圖的總結

　　目前來講，在各大網站都會使用到焦點輪播圖，因為它占用地方少，交互性好，是前端設計必須要掌握的技能之一。

　　原理：使用三層嵌套，最里層裝載圖片，圖片需要浮動。最里層設置相對定位。然后再使用JavaScript設置一個定時器，每過一段時間便讓最里層的塊的left值改變。

而第二層則需要設置overflow：hidden；這個屬性，否則將會導致這個層被子層撐大。不美觀。

　　

此圖便為實現效果圖。

　　下面先講一講如何布局。

　　

　　首先布局分為三大塊，一塊為inner，包裹住所有的圖片；一塊為outer，決定展示的窗口；兩個a標簽為左右箭頭；pagination塊則包裹着下面的每一小塊span標簽；

wrap是最外面的塊，控制着整個輪播圖的位置。

　　然后，設置相關的樣式。如圖：

html,body,div,img,a,span{
    margin:0;
    padding:0;
}
a{
    text-decoration: none;
    color:black;
}
.wrap{
    width:510px;
    margin:20px auto;
}
#outer{
    width:510px;
    overflow: hidden;
    position: relative;
    left:0;
    top:0;
}
#inner{
    width:9999px;
    position: relative;
    left:0;
    top:0;
    overflow: hidden;
}
#inner img{
    float:left;
}
#outer a{
    position: absolute;
    width:30px;
    height:30px;
    font-size: 30px;
    text-align: center;
    line-height: 30px;
    top:50%;
    margin-top: -15px;
    background-color: #ccc;
    opacity: 0;
    filter: alpha(opacity=0);
}
#outer .active{
    background-color: #9f9f9f;
}
#outer:hover a{
    opacity: 0.6;
    filter: alpha(opacity=60);
}
#outer .leftGo{
    left:0;
}
#outer .rightGo{
    right:0;
}
#pagination{
    position: absolute;
    bottom: 20px;
    width:100%;
    text-align: center;
}
#pagination span{
    display: inline-block;
    width:30px;
    height:30px;
    line-height: 30px;
    border-radius: 50%;
    background-color: #fbfbfb;
    opacity: 0.6;
    filter: alpha(opacity=60);
    cursor: pointer;
    -webkit-user-select: none;
}

 

 

 

　　至此，相關的設置就完成了。

　　但是在此過程中有一些問題需要注意：

　　1.計時器在每次調用之前必須清除，否則當有多個事件觸發的時候計時器會疊加，從而會越走越快。

　　2.一些重復的代碼沒必要重復寫，應該要封裝到函數里面去。

　　3.當對多個相同的元素進行操作時，注意不要讓數組越界。 

　　4.要考慮兼容性問題

　　5.要注意代碼的格式化。

　　

var inner = document.getElementById("inner");
    var imgArr =inner.getElementsByTagName("img");
    var spanArr = document.getElementById("pagination").getElementsByTagName("span");
    var leftGo = document.getElementById("outer").getElementsByTagName("a")[0];
    var rightGo = document.getElementById("outer").getElementsByTagName("a")[1];
    var picWidth = imgArr[0].offsetWidth;//獲取第一站圖片的寬度
    var index = 0;
    var timer = null;
    var AutoTimer = null;
timer = setInterval(AutoGo,2000);//設置計時器
    leftGo.onclick=function(){
        Goleft();//點擊左邊的小箭頭
    };
    rightGo.onclick = function(){
        Goright();//點擊右邊的小箭頭
    };
    inner.onmouseover=function(){
        clearInterval(timer);//鼠標移入，清除計時器
    }
    inner.onmouseleave=function(){
    timer = setInterval(AutoGo,2000);//鼠標移出，啟動計時器
    }
    function AutoGo(){
        //自動輪播
        var start =inner.offsetLeft;//距離左邊的邊框的長度
        var end = - index * picWidth;//終點
        var moveDistance = end - start;
        var speed = 20;//要走的步數
        var speedCount = 0;
        clearInterval(AutoTimer);
            //清除之前的計時器，否則會越走越快
        clearInterval(timer);
        AutoTimer = setInterval(function(){
            speedCount++;
            if(speedCount >=speed){
                            //步數足夠
                clearInterval(AutoTimer);
                clearInterval(timer);
                timer = setInterval(Goright,1000);
                //再次啟動計時器
            }
            inner.style.left = moveDistance *     speedCount/speed +start+"px";
//每步要走的距離
        },100)
        for(var i = 0 ; i<spanArr.length;i++){
                    //下標的樣式改變，以及點擊事件的綁定
            spanArr[i].index = i;
            spanArr[i].className="";
            spanArr[index].className="active";
            spanArr[i].onclick =function(){
                index=this.index;//傳遞當前點擊的位置
                AutoGo();
            }
        }
    }
    function Goleft(){
        //往左走一步;
        index--;
        if(index<0){
            index =imgArr.length-1;
        }
        AutoGo();
        
    }
    
    function    Goright(){
        //往右走一步
        index++;
        if(index>imgArr.length-1){
            index =0;
        }
        AutoGo();
    }

 

 如若轉載，請說明出處，謝謝