JQ_图片轮播

上次PO了一个Javascript实现的图片轮播。即使做了函数封装，代码量还是有点冗余。复用率还是不够高。

下面用JQ实现一下图片轮播

 

html:

<div class="content">
        <div class="img_change">

            <div id="img_container" class="img_container"></div>
            
            <div class="change_btn">
                <ul id="btn_container"></ul>
            </div>            
        </div>
    </div>
html代码

css代码：

 1 *{
 2     padding: 0;
 3     margin:0;
 4     box-sizing: border-box;
 5 }
 6 .content{
 7     width: 700px;
 8     margin:100px auto;
 9 }
10 .img_change{
11     position: relative;
12     width: 731px;
13 }
14 .img_container{
15     width: 731px;
16     height: 300px;
17 }
18 .img_container img{
19     position: absolute;
20 }
21 .change_btn{
22     margin: 0 auto;
23     padding: 10px;
24     background: rgba(0,0,0,0.4);
25 }
26 .change_btn ul{
27     list-style: none;
28     text-align: center;
29 }
30 .change_btn>ul>li{
31     display: inline-block;
32     width:25px;
33     height: 10px;
34     background: #1e443f;
35     cursor: pointer;
36     opacity: 0.8;
37     margin-right: 10px;
38 }
39 .active{
40     background: #d7d7d7 !important;
41 }
css代码

jq代码：

 1 $(function(){
 2     imgArr = ['banner-1.png','banner-2.png','banner-3.png'];
 3 
 4     initData();
 5 
 6     startChange();
 7 
 8     $("#btn_container li").bind("click",clickBtn)
 9 })
10 
11 //初始化
12 function initData(){
13     var len = imgArr.length;
14 
15     for(var i=0;i<len;i++){
16         
17         $("#img_container").append("<img src='./images/"+imgArr[i]+"'>");
18         $("#btn_container").append("<li data-index='"+i+"'></li>");
19     }
20 
21     $("#img_container img:not(:first)").hide();
22     $("#btn_container li:first").addClass("active");
23 }
24 
25 //轮播图片
26 var timer = null;
27 var cur = 0;
28 function startChange(time){
29     clearInterval(timer);
30     var speedTime = time || 4000;
31 
32     timer = setInterval(function(){
33         var next = cur+1 == imgArr.length ? 0:cur+1;
34 
35         changeImg(cur,next);
36 
37         cur = next;
38 
39     },speedTime)
40 }
41 
42 //鼠标点击触发函数
43 function clickBtn(){
44     clearInterval(timer);
45     var that = $(this);
46     var next = parseInt(that.attr("data-index"));
47 
48     changeImg(cur,next);
49     startChange();
50     
51     cur = next;
52 }
53 
54 //改变显示的内容
55 function changeImg(cur,next){
56     $("#img_container img").eq(cur).fadeOut("2000");
57     $("#btn_container li").eq(cur).removeClass("active");
58 
59     $("#img_container img").eq(next).fadeIn("2000");
60     $("#btn_container li").eq(next).addClass("active");
61 }

效果和JS实现的效果大同小异（下面是JS的图片轮播）

http://www.cnblogs.com/adelina-blog/p/5885130.html

就不PO图片上来了

 

以上内容，如有错误请指出，不甚感激。

 

posted @ 2016-09-28 17:02  FIONA-SUN  阅读(490)  评论(0)  编辑  收藏  举报