關於學習輪播後的一點小心得

這裡直接貼出HTML程式碼，相關解釋會放在程式碼前後。

原理說明（個人理解）：將所有圖片放在一個div中的同時，使其左浮動呈現在一行；同時用一個容器包裹住，將容器的大小設定為一張圖片的大小，超出的部分隱藏起來；通過控制圖片的div的left值，向左或向右的移動一張圖片的大小；可以設定相關按鈕去控制圖片的切換，最後通過一個定時器讓圖片自動播放。

    <div id="container">
        <div id="list" style="left:-600px;">
            <img src
 
="../../images/103.jpg"/>
            <img src="../../images/101.jpg"/>
            <img src="../../images/102.jpg"/>
            <img src="../../images/103.jpg"/>
            <img src="../../images/101.jpg"/>
        </div>
        <div id="button">
            <span index="1" class
 
="on"></span>
            <span index="2"></span>
            <span index="3"></span>
        </div>


        <a href="javascript:;" id="prev" class="arrow">&lt;</a>
        <a href="javascript:;" id="next" class="arrow">&gt;</a>

    </div
 
>

簡單說明：這裡的輪播圖，其實就是一個container容器,包含了一個圖片列表div（這裡為了防止切換出現空白處，在最開始和最後分別加上了最後一張和第一張的圖片，所以在list的樣式中設定了left：-600px，用於顯示要顯示的第一張圖片），一組與圖片對應的按鈕div，以及前進後退的倆按鈕。但是重點是css樣式上。下面也直接貼出程式碼：

#container{
    position:relative;
    margin:0 auto;
    width:600px;
    height:337px;
    overflow:hidden;
}

container的大小應該和一張圖片的大小相同，同時設定超出的部分隱藏，這很重要，因為container是整個輪播的可視區域。

#list{
    position:absolute;
    width:3000px;
    height:337px;
}
#list img{
    width:600px;
    height:337px;
    float:left;
    display:block;
}

list的寬需要設定為所有圖片的寬的總和，設定為絕對定位，同時list下的img需要左浮動的同時顯示為block。

#button{
    position:absolute;
    width:75px;
    height:20px;
    z-index:2;
    bottom:20px;
    left:45%;
    }
#button span{
    width:20px;
    height:20px;
    float:left;
    margin-left:3px;
    border-radius:10px;
    border:1px #FFF solid;
    cursor: pointer;
}

.on{
    background-color:#FF66CC;}

關於與圖片相對應的按鈕的css樣式設定，說是按鈕，其實是用span標籤，這裡要注意的是按鈕的定位，以及滑鼠移動到上面顯示的是pointer，且需要在圖片的上層顯示，即z-index設定的要比圖片高；給按鈕新增一個類on，控制背景顏色，用以顯示當前是哪個按鈕。

.arrow{
    position: absolute;
    width: 60px;
    height: 40px;
    font-size: 50px;
    color: #999999;
    margin-top: 25%;
}
#next{
    right:-20px;
}

前進後退按鈕的樣式設定，arrow為兩個按鈕的公共樣式，需要注意的同樣是倆按鈕的位置定位，可以根據自己的需要進行調整。

上面就是基本的css樣式，下面分步說明如何用js來控制圖片切換。

啥也別說，先獲取元素：

    var container = document.getElementById("container");
    var prev = document.getElementById("prev");
    var next = document.getElementById("next");
    var list = document.getElementById("list");
    var buttons = document.getElementById("button").getElementsByTagName("span");

接下來是最核心的部分，寫一個function animate()，來控制圖片的切換。從上面看，所有的圖片都放在了一個id為list的div裡面，且設定了左浮動，這時候當你想要切換圖片的時候，直接修改list的left值，將整個div左移或右移一張圖片的寬度，在可視區域container就會看到從一張圖片切換到了下一張或上一張圖片。

function animate(offset){
    var newleft = parseInt(list.style.left)+ offset;
    list.style.left = newleft + "px";
}
prev.onclick = function(){animate(600);}
next.onclick = function(){animate(-600);}

這裡的offset是圖片的大小，通過控制offset的正負，進而控制圖片是左移還是右移。但是當右移到最後一張圖片或左移到第一張圖片時，再進行移動，便會出現空白。

下面對其進行改進，新增判斷，判斷是否是第一張或最後一張圖片：

if(newleft<-1800){ 
        list.style.left = '-600px';
    }
if(newleft>-600){
        list.style.left =-1800  + "px";
    }

最後再加上一個定時器timer

    function start(){
        timer = setInterval(function(){
        next.onclick();
        },2600);
    start();

到這基本可以實現一個最簡單的圖片輪播（沒有按鈕等功能），下面接著完善。

下面程式碼是讓圖片實現平移效果，即一點點的移動，而不是整張圖片一下就移動過去，關鍵就在於設定一個速度，讓圖片按照這個速度去移動，同時需要去判斷圖片是否移動到相應的位置：

function animate(offset){
    var newleft = parseInt(list.style.left)+ offset;
    //list.style.left = newleft + "px";
    var speed;
    var time = 60 ;
    speed = offset / time;//每次移動的大小，即速度
    go();
    function go(){
          //判斷是左移還是右移的同時判斷圖片是否到達相應位置
        if(( speed < 0 && parseInt(list.style.left) > newleft) || (speed > 0 && parseInt(list.style.left)) < newleft ){
            list.style.left = parseInt(list.style.left) + speed + "px";
            setTimeout(go,10);//10毫秒一次呼叫自身
            }
        else{
            list.style.left = newleft + 'px';
            if(newleft<-1800){ 
        list.style.left = '-600px';
        }
            if(newleft>-600){
        list.style.left =-1800  + "px";
        }
            }
        }

    }

接下來，當圖片切換時，圖片按鈕也要相應的切換，同樣按鈕的位置也需要進行判斷：

    var index = 1 ;  //控制按鈕的位置
    function showBtn(){
        //迴圈遍歷按鈕組，去除按鈕的on類名，同時給當前按鈕新增on類名（當前index=1 減一即為第一個按鈕）
        for(var i=0;i<buttons.length;i++){
            if(buttons[i].className=="on"){
                buttons[i].className="";
                break;
                }
            }
      //alert(buttons[index-1])
        buttons[index-1].className="on";
        }

    //將按鈕顯示函式應用到前進或後退按鈕上，重點是需要注意index的變化
    prev.onclick = function(){
            index--;
            if(index<1){
                index =3;
            }
        showBtn();
            animate(600);   
            }
    next.onclick = function(){
            index++;
            if(index>3){
                index =1;
            }
        showBtn();
            animate(-600);  
            }

接著實現點選按鈕，切換圖片的功能（也放在showBtn()函式中）：

        //遍歷按鈕組，新增點選功能
        for(var i=0;i<buttons.length;i++){
            buttons[i].onclick = function(){
            //獲取當前被點選按鈕的index值
            var nowIndex = parseInt(this.getAttribute("index"));
            //alert(nowIndex);
            //判斷被點選按鈕是否就是當前的按鈕
            if(nowIndex == index){
                return;
                }
            //通過當前index值和被點選index值的差，計算出需要的位移量，並進行位移
            var nowOffset = -600 * (nowIndex - index);
            //alert(nowOffset);
            //更新index值，為當前被點選的index值，同時還要呼叫showBtn函式，同樣實現按鈕切換
            index = nowIndex;
            animate(nowOffset);
            showBtn();
                    }
                }

最後的最後，新增滑鼠移入移出事件，滑鼠移入，清除定時器；滑鼠移除，呼叫定時器：

    container.onmouseover = function(){
        clearInterval(timer);
        }
    container.onmouseout = function(){
        start();
        }

因為某些原因，沒辦法上傳相關圖片，希望見諒；
文章純屬個人理解，是在觀看慕*網相關視訊後所寫，如果有錯誤希望大家指出來；
以上。