JQuery簡單實現圖片輪播效果

不少頁面都須要用到界面輪播，可是用原生js相對來講比較複雜，用jQuery實現效果比較迅速，寫個簡單的demo

 

一、首先在HTML頁面要放置輪播圖案位置插入div，這裏寫了輪播圖片數量爲3張，因此定義了三個<li>做爲輪播button

  <div id= "container">
        <p class="ImgList" style="background:url('/img/img1.png') center"></p>

        <p class="ImgList" style="background:url('img/img2.png') center"></p>

        <p class="ImgList" style="background:url('/img/img3.png') center"></p>
        <!--輪播的按扭-->
        <ul class="button">
            <li><a class="hover" href="javascript:void(0);">●</a></li>
            <li><a href="javascript:void(0);">●</a></li>
            <li><a href="javascript:void(0);">●</a></li>
        </ul>
  </div>

 

二、爲div設置相應的樣式 

.ImgList {
    width: 100%;
    height: 420px;
    position: absolute;/*絕對定位*/
    left: 0px;
    top: 0px;
    z-index: -1;/*z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素老是會處於堆疊順序較低的元素的前面。*/
}

.button {
    height: 20px;
    position: absolute;
    right:50%;
    bottom: 20px;
    z-index: 3;
    display: inline-block; /*行內塊級元素*/
}
.button li {
    list-style-type: none;
    width:20px;
    height:10px;
    float: left;
    margin: 0px 5px;
}
.button li a{
    text-decoration: none;
    font-size: 30px;
    color: #787c82;/*未選中狀態顏色*/
}

.button li .hover{
    color:white;/*設置選中狀態爲白色*/
}

三、在界面引入jQuery文件（如：jquery-1.7.2.min.js），（注意：文件放在本身的js文件以前）

 

四、新建js文件，js代碼實現輪播效果

 1 var _index=0;
 2 var timePlay=null;
 3 $("#container .ImgList").eq(0).show().siblings("div").hide();//只顯示第一張
 4 
 5 $("ul.button li").click(function(){
 6     clearInterval(timePlay);
 7     _index=$(this).index();
 8     $("ul.button li .hover").removeClass('hover');
 9     $(this).find('a').addClass("hover");
10     $("#container .ImgList").eq(_index).fadeIn().siblings("p").fadeOut();//淡出
11     autoPlay();
12 });
13 
14 //自動輪播
15 function autoPlay(){
16     timePlay=setInterval(function(){
17         _index++;
18         if(_index<3){
19             if(_index==2){_index=-1; }
20             $("ul.button li .hover").removeClass('hover');
21             $("ul.button li").eq(_index).find('a').addClass("hover");
22 
23             $("#container .ImgList").eq(_index).fadeIn().siblings("p").fadeOut();
24         }else{_index=-1;}
25     },2000);
26 };
27 autoPlay();//調用和執行

五、實現效果：

圖片自動輪播，間隔時間爲2000毫秒，點擊相應●時，切換相應圖片。