图片轮播，考虑到动态插入要轮播的图片以及生成相应的圆点图标。实现无缝轮播切换。将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();}) |