jQuery做輪播圖

這是我自己做的一個簡單的輪播圖，效果圖如下：














我覺得輪播圖中最主要的是要理解到圖片為什么會滑動，是怎么控制的。上面這個我自己做的，是搭好的一個結(jié)構(gòu)，在無序列表中插入需要的圖片。然后在插入圖片的后面添加一個空的無序列表，作為輪播圖中下方的小點。

 

    <div class="box">
                <ul class="imageList">
                    <li><img src="img/輪播1.jpg"/></li>
                    <li><img src="img/輪播2.jpg"/></li>
                    <li><img src="img/輪播3.jpg"/></li>
                    <li><img src="img/輪播4.jpg"/></li>
                </ul>
                
                <ul class="num">
                    
                </ul>
            </div>


然后就是css中書寫樣式了，首先肯定得把無序列表中的li從從上至下排列變?yōu)樗椒较蚺帕?，也就是給li添加一個float屬性；然后有一點需要注意，輪播圖外面的大盒子必須設(shè)置為圖片的大小，超出的隱藏，這樣可以剛剛好顯示出一張圖片。然后裝圖片的ul的寬度必須大于或者等于所有圖片總寬度。同樣，這里也需要運(yùn)用一個定位的知識，子絕父相。給class為box的盒子設(shè)置相對定位，裝圖片的ul設(shè)置絕對定位。這里，盡管輪播圖下面幾個點沒有，但是我們要把樣式先寫好，然后后面通過JavaScript添加。

主要樣式如下：

 

    .box{
        width: 500px;
        height: 300px;
        background-color: lightgrey;
        margin-top: 30%;
        overflow: hidden;
        position: relative;
        
    }
    .imageList img{
        width: 500px;
        height: 300px;
    }
    .imageList{
        width: 2500px;
        list-style: none;
        float: left;
        position: absolute;
        
    }
    .imageList li{
        float: left;
    }
     
    .box .num{
        position: absolute;
        width: 100%;
        bottom: 10px;
        left: 0;
        text-align: center;
     
    }
    .box .num li{
        width: 10px;
        height: 10px;
        background-color:white;
        border-radius: 50%;
        display: inline-block;
        margin: 0px 3px;
        cursor: pointer;
    }
    .box .num li.on{
        background-col


 

 

在HTML文件和css樣式表都已經(jīng)寫好之后，我們就可以開始書寫js代碼了，讓圖片動起來。

在JavaScript中讓圖片動起來的核心函數(shù)是setInterval(function（）{}，value);這個函數(shù)是一個定時器，第一個參數(shù)是你想讓某個對象執(zhí)行的事件或者動作，然后第二個參數(shù)value則是時間，意思是多少時間執(zhí)行一次。

然后在輪播圖中，想讓圖片動起來并且從視覺上看沒什么異樣，我們首先需要克隆第一張圖片，并且將第一張圖片加在最后。具體代碼如下：

 

    var clone = $(".box .imageList li").first().clone();
        
        $(".box .imageList").append(clone);


這個代碼是用jQuery書寫的，首先獲取到輪播圖那個大盒子，然后再找到輪播的圖片這個對象，然后用first（）方法找到第一張照片，并且用clone（）這個方法將第一張照片克隆，最后用append（）方法把克隆下來的這張照片添加到所有輪播圖片的后面，這樣克隆工作就完成了。

接下來就是讓這個圖片動起來了，動起來很簡單，只需要設(shè)置一個定時器就ok，代碼如下：

 

    var t=setInterval(function(){
            i++;
            move();
            
        },2000);


這時定時器中的move（）函數(shù)并沒有定義，接下來我們就定義這個函數(shù)，代碼如下：

 

    function move(){
            if(i==size){
                i=1;
                $(".box .imageList").css({left:0});
                
            }
     
            
            $(".box .imageList").stop().animate({left:-i*500},500);
            
            if (i==size-1) {
                $(".box .num li").eq(0).addClass("on").siblings().removeClass("on");
            } else{
                $(".box .num li").eq(i).addClass("on").siblings().removeClass("on");
            }
            
            
        }


首先要定義一個變量i，初始值為0，每執(zhí)行一次定時器，i的值便會加1。在定義一個size值，令其等于輪播圖中圖片的數(shù)量。然后讓裝所有圖片的容器往左移動圖片的寬度*i，這樣在定時器的配合之下，圖片就會一張一張的一次展示?？上攵?，i的值肯定有個范圍，不可能讓它永遠(yuǎn)的加大，因此在move函數(shù)中，我們需要一個判定。當(dāng)i=size的時候，這個時候輪播圖中的照片肯定已經(jīng)到了最后一張，這個時候我們前面克隆了第一張照片加在最后，因此這張照片雖然是最后一張，但是其實它是第一張照片。這時，我們就需要重置i的值，令i=1；并且通過jQuery控制樣式，令裝照片的容器回到初始位置，開始新的一次運(yùn)動。

最后就是初始圖片中的那幾個點了，這個更簡單了，我們獲取了size的值之后，再通過for循環(huán)，就可以添加那幾個點了。代碼如下：

 

    var size=$(".box .imageList li").size();
        
        for (var j=0;j<size-1;j++) {
            $(".box .num").append("<li></li>");
        }


這個難點在于怎么讓小點的位置隨著圖片的移動而移動。首先我們默認(rèn)將在css中定義好的樣式賦予第一個小點。代碼如下：

$(".box .num li").first().addClass("on");


 

然后就是在move函數(shù)中定義小點的相應(yīng)的移動,代碼如下：

 

    if (i==size-1) {
                $(".box .num li").eq(0).addClass("on").siblings().removeClass("on");
            } else{
                $(".box .num li").eq(i).addClass("on").siblings().removeClass("on");
            }


很明顯，小點的樣式也是通過i來確定的。這里有一個誤區(qū)，很多人會認(rèn)為第一個小點就是1，但是其實不是，因為數(shù)組是從0開始的，所以第一個小點是0。i的值代表了顯示的是第i-1張圖片，所以這個時候只需要將樣式賦予第i個點就行了，并且同時要清除其他的點的樣式。特殊的當(dāng)i=size-1的時候，這個時候，顯示的是最后一張圖，這張圖下面那張圖就是第一張圖的克隆圖，因此，這個時候，小點的樣式就需要添加給第一個點。

 

完成以上操作之后，簡單的輪播圖就做好了。

 

歡迎關(guān)注微信公眾號:猴哥說前端