jquery实现轮播图
1 /**
2 * Created by hui on 2015/11/3.
3 */
4 $(function(){
5 var circleLi = $('.poster-item');
6 var liLength = circleLi.length;
7 var L = 640;
8 var n = 640;
9 var posterUl = $('.poster-ul');
10 var posterUlLeft = posterUl.position().left;
11 var action = {
12 initCss:function(){
13 (function setCss(){
14 for(var i= 0;i<liLength;++i){
15 circleLi[i].style.left=i*L-n*2+"px";
16 }
17 })();
18 },
19 ifOver:function(Left){
20 if(Left<-3*n){
21 Left=2*n;
22 }
23 if(Left>2*n){
24 Left = -3*n;
25 }
26 return Left;
27 },
28 moveLeft:function(){
29 posterUlLeft-=n;
30 posterUlLeft = action.ifOver(posterUlLeft);
31 posterUl.animate({left:posterUlLeft+'px'});
32 },
33 moveRight:function(){
34 posterUlLeft+=n;
35 posterUlLeft = action.ifOver(posterUlLeft);
36 posterUl.animate({left:posterUlLeft+"px"});
37 }
38 };
39 action.initCss();
40 $('.poster-left-btn').click(action.moveLeft);
41 $('.poster-right-btn').click(action.moveRight);
42 });原谅我"无耻"的使用了jquery,不过以后有时间我会尽量用原生的js来实现这个的。
html代码：
<html lang="en"><head>
<meta charset="UTF-8">
<title></title>
<link href="style.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.js"></script>
<script src="js.js"></script>
</head>
<body>
<div class="J_poster poster-main">
<div class="poster-btn poster-left-btn"><</div>
<ul class="poster-ul">
<li class="poster-item" style="left: -1280px;"><a href="#"><img src="./img/1.jpg"></a></li>
<li class="poster-item" style="left: -640px;"><a href="#"><img src="./img/2.jpg"></a></li>
<li class="poster-item" style="left: 0px;"><a href="#"><img src="./img/3.jpg"></a></li>
<li class="poster-item" style="left: 640px;"><a href="#"><img src="./img/4.jpg"></a></li>
<li class="poster-item" style="left: 1280px;"><a href="#"><img src="./img/5.jpg"></a></li>
<li class="poster-item" style="left: 1920px;"><a href="#"><img src="./img/6.jpg"></a></li>
</ul>
<div class="poster-btn poster-right-btn">></div>
<div class="poster-circle-div">
<ul class="circle-ul">
<li class="circle-li"></li>
<li class="circle-li"></li>
<li class="circle-li"></li>
<li class="circle-li"></li>
<li class="circle-li"></li>
<li class="circle-li"></li>
</ul>
</div>
</div>
<script>
</script>
</body></html>css代码：
1 html,body,ul,li,p{
2 margin: 0;
3 padding: 0;
4 }
5 ul,li{
6 list-style: none;
7 }
8 a{
9 text-decoration: none;
10 }
11 .clearfix{
12 clear: both;
13 }
14 .poster-main{
15 width: 640px;
16 height: 270px;
17 position: relative;
18 margin: auto;
19 overflow: hidden;
20 }
21 .poster-btn{
22 position: absolute;
23 width: 50px;
24 height: 100px;
25 text-align: center;
26 line-height: 100px;
27 font-size: 3.5em;
28 top: 70px;
29 cursor: pointer;
30 z-index: 999;
31 background: rgba(0,0,0,.3);
32 color: #fff;
33 -webkit-transition: all 0.3s;
34 -moz-transition: all 0.3s;
35 -ms-transition: all 0.3s;
36 -o-transition: all 0.3s;
37 transition: all 0.3s;
38 -webkit-user-select: none;
39 -moz-user-select: none;
40 -ms-user-select: none;
41 user-select: none;
42 }
43 .poster-btn:hover{
44 background: rgba(0,0,0,.5);
45 }
46 .poster-left-btn{
47 left: 0;
48 }
49 .poster-right-btn{
50 right: 0;
51 }
52 .poster-ul{
53 position: absolute;
54 }
55 .poster-ul .poster-item{
56 text-align: center;
57 position: absolute;
58
59 transition: all 2s;
60 }
61 .z{
62 z-index: 888;
63
64 }
65 .poster-circle-div{
66 position: absolute;
67 bottom: 0;
68 left: 50%;
69 margin-left: -65px;
70 margin-bottom: 30px;
71
72 }
73 .circle-ul li{
74 float: left;
75 cursor: pointer;
76 color: #fff;
77 background: rgba(255,255,255,.6);
78 width: 12px;
79 height: 12px;
80 text-align: center;
81 border-radius: 50%;
82 margin: 2px;
83 }
84 .show{
85 background: rgba(0,0,0,.3) !important;
86 }本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2015-04-27 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读