代码改变世界

图片轮播

2016-08-04 16:42  袁叶子  阅读(138)  评论(0)  编辑  收藏  举报

图片轮播，考虑到动态插入要轮播的图片以及生成相应的圆点图标。实现无缝轮播切换。将jquery简单的封装了一下，可以作为一整个模块任意使用，class命名不同的时候只需要在初始化的时候，改动一下即可。前端刚刚入门，希望大家看到代码如果觉得有改进的，可以写的更简洁更方便的话，请指教。

html代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态轮播</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/viewpager.css">
</head>
<body>
    <div class="wrapper">
        <ul class="clearfix banner" id="showArea"></ul>
        <a href="javascript:;" class="btnCom btnPrev"><</a>
        <a href="javascript:;" class="btnCom btnNext">></a>
        <ul class="num" id="iconnum"></ul>
        <script type="text/javascript">
            var imgsrc=[
                    {
                        src:"images/b1.jpg",
                        url:"#",
                        picInfo:""
                    },
                    {
                        src:"images/b2.jpg",
                        url:"#",
                        picInfo:""
                    },
                    {
                        src:"images/b3.jpg",
                        url:"#",
                        picInfo:""
                    },
                    {
                        src:"images/b4.jpg",
                        url:"#",
                        picInfo:""
                    },
                    {
                        src:"images/b5.jpg",
                        url:"#",
                        picInfo:""
                    },
                    {
                        src:"images/b6.jpg",
                        url:"#",
                        picInfo:""
                    },
                ];
            var showArea=document.getElementById("showArea");
            var iconNum=document.getElementById("iconnum");
            var picLength=imgsrc.length;
            var picDom="";
            var iconDom="";
            var picwidth=picLength*760;
            for(var i=0;i<picLength;i++){
                var picSrc;
                picsrc=imgsrc[i].src;
                picDom+='<li><a target="_blank" href="'+imgsrc[i].url+'"><img alt="'+imgsrc[i].imgInfo+'" src="'+picsrc+'"/></a></li>';
                iconDom+='<li></li>';
            }
            showArea.innerHTML=picDom;
            showArea.style.width=(picwidth+760)+"px";
            iconNum.innerHTML=iconDom;
        </script>
    </div>
    <script src="js/jquery-1.12.0.js"></script>
    <script src="js/viewpager.js"></script>
</body>
</html>

CSS代码：

?
1
2
3
4
5
6
7
8
9
10
11
.wrapper{position:relative;margin:90px auto;width:760px;height:280px;overflow:hidden;border:1px solid #333;}
.wrapper ul.banner{position:absolute;top:0;left:0;z-index:1;}
.wrapper ul.banner li{float:left;}
.wrapper ul.banner li img{width:760px;height:280px;border:none;}
.wrapper .btnCom{display:none;position:absolute;top:50%;margin-top:-45px;z-index:3;width:40px;height:90px;text-align:center;line-height:90px;color:#fff;background:rgba(170,170,170,0.3);font-family:"microsoft yahei";font-size:44px;}
.wrapper .btnCom:hover{text-decoration:none;}
.wrapper .btnPrev{left:0px;}
.wrapper .btnNext{right:0px;}
.wrapper ul.num{position:absolute;left:300px;bottom:0px;z-index:3;}
.wrapper ul.num li{display:inline-block;margin-right:4px;width:20px;height:20px;border-radius:10px;background:#333;cursor:pointer;}
.wrapper ul.num .on{background:#f40510;}

jquery代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
var viewpager=viewpager || {};
viewpager.i=0;
viewpager={
    //参数初始化
    init:function(){
        return def={
            wrapper:$(".wrapper"),
            btnPrev:$(".btnPrev"),
            btnNext:$(".btnNext"),
            item:$(".banner"),
            iconNum:$(".num"),
            btnCom:$(".btnCom")
        };
    },
    //左右点击切换
    btnMove:function(){
        viewpager.init();
        def.item.find("li").eq(0).clone().appendTo(def.item);
        def.iconNum.find("li").eq(0).addClass("on").siblings().removeClass("on");
        var length=def.item.find("li").length;
        var move=function(){
            if(i==length){
                def.item.css({"left":0});
                i=1;
            }
            if(i==-1){
                def.item.css({"left": -(length - 1) * 760 });
                i = length - 2;
            }
            def.item.stop().animate({"left": -i * 760 });
            if (i == length - 1) {
                def.iconNum.find("li").eq(0).addClass("on").siblings().removeClass("on");
            } else {
                def.iconNum.find("li").eq(i).addClass("on").siblings().removeClass("on");
            }
        };
        var t=setInterval(function(){i++;move();},2000);
        def.wrapper.hover(function(){
            clearInterval(t);
            def.btnCom.show();
        },function(){
            t=setInterval(function(){i++;move();},2000);
            def.btnCom.hide();
        });
        def.btnPrev.click(function(){
            i--;
            move();
        });
        def.btnNext.click(function(){
            i++;
            move();
        })
    },
    //数字鼠标划入切换
    numMove:function(){
        viewpager.init();
        def.iconNum.find("li").hover(function(){
            var index=$(this).index();
            i=index;
            def.item.stop().animate({"left": -index * 760 });
            $(this).addClass("on").siblings().removeClass("on");
        })
    }
 
}
 
 
$(document).ready(function(){
viewpager.numMove();  
viewpager.btnMove();
})