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代码实现轮播效果

 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();//调用和执行

5、实现效果：

图片自动轮播，间隔时间为2000毫秒，点击相应●时，切换相应图片。

JQuery简单实现图片轮播效果

相关推荐