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 }