JQuery簡單實現圖片輪播效果

很多頁面都需要用到界面輪播，但是用原生js相對來說比較復雜，用jQuery實現效果比較迅速，寫個簡單的demo

 

1、首先在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>

 

2、為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;/*設置選中狀態為白色*/
}

3、在界面引入jQuery文件（如：jquery-1.7.2.min.js），（注意：文件放在自己的js文件之前）

 

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

var _index=0;
var timePlay=null;
$("#container .ImgList").eq(0).show().siblings("div").hide();//只顯示第一張

$("ul.button li").click(function(){
    clearInterval(timePlay);
    _index=$(this).index();
    $("ul.button li .hover").removeClass('hover');
    $(this).find('a').addClass("hover");
    $("#container .ImgList").eq(_index).fadeIn().siblings("p").fadeOut();//淡出
    autoPlay();
});

//自動輪播
function autoPlay(){
    timePlay=setInterval(function(){
        _index++;
        if(_index<3){
            if(_index==2){_index=-1; }
            $("ul.button li .hover").removeClass('hover');
            $("ul.button li").eq(_index).find('a').addClass("hover");

            $("#container .ImgList").eq(_index).fadeIn().siblings("p").fadeOut();
        }else{_index=-1;}
    },2000);
};
autoPlay();//調用和執行

5、實現效果：

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