标签：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>多banner效果</title> 6 <meta name="keywords" content="" /> 7 <meta name="description" content="" /> 8 9 <style> 10 *{margin:0;padding:0;} 11 ul,li{list-style:none;} 12 .banner{width:280px;height:210px;margin:20px auto;overflow:hidden;position:relative;} 13 .banner .bannerul li{width:280px;height:210px;} 14 .banner .prev,.next{display:block;width:30px;height:50px;color:#fff;font-size:22px; 15 background:rgba(0,0,0,0.5);position:absolute;top:85px;text-decoration:none; 16 text-align:center;line-height:50px; 17 } 18 .banner .prev{left:0;} 19 .banner .next{right:0;} 20 </style> 21 </head> 22 <body> 23 24 <div class="banner"> 25 <ul class="bannerul"> 26 <li><img src="images/337622.jpg" /></li> 27 <li><img src="images/335897.jpg" /></li> 28 <li><img src="images/336767.gif" /></li> 29 </ul> 30 <a href="#" class="prev"><</a> 31 <a href="#" class="next">></a> 32 </div> 33 34 <div class="banner"> 35 <ul class="bannerul"> 36 <li><img src="images/337622.jpg" /></li> 37 <li><img src="images/335897.jpg" /></li> 38 <li><img src="images/336767.gif" /></li> 39 </ul> 40 <a href="#" class="prev"><</a> 41 <a href="#" class="next">></a> 42 </div> 43 44 <div class="banner"> 45 <ul class="bannerul"> 46 <li><img src="images/337622.jpg" /></li> 47 <li><img src="images/335897.jpg" /></li> 48 <li><img src="images/336767.gif" /></li> 49 </ul> 50 <a href="#" class="prev"><</a> 51 <a href="#" class="next">></a> 52 </div> 53 54 55 56 <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> 57 <script type="text/javascript"> 58 $(function(){ 59 60 var $li = $(".bannerul").find("li"); 61 62 var $lastli = $li.last().clone(); 63 var $firstli = $li.first().clone(); 64 $(".bannerul").append($firstli); 65 $(".bannerul").prepend($lastli); 66 67 68 var $lih = $li.height(); 69 var $len = $li.length/$(".banner").find(".bannerul").length; 70 71 $(".bannerul").css({"marginTop":$lih*-1}); 72 73 74 $(".next").click(function(){ 75 76 var $ul = $(this).parent(".banner").find(".bannerul"); 77 78 var index = ($ul.data("index"))||1; 79 index ++; 80 $ul.stop(true,true).animate({"marginTop":index*$lih*-1},function(){ 81 if(index==$len+1){ 82 $(this).css({"marginTop":$lih*-1}); 83 index = 1; 84 } 85 $ul.data("index",index); 86 }); 87 88 89 }); 90 91 $(".prev").click(function(){ 92 var $ul = $(this).parent(".banner").find(".bannerul"); 93 var index = ($ul.data("index"))||1; 94 index --; 95 96 97 $ul.stop(true,true).animate({"marginTop":index*$lih*-1},function(){ 98 if(index==0){ 99 $(this).css({"marginTop":$len*$lih*-1}); 100 index = $len; 101 } 102 $ul.data("index",index); 103 }); 104 105 106 }); 107 }); 108 109 </script> 110 111 <!-- 112 337622.jpg 113 335897.jpg 114 336767.gif 115 334732.jpg 116 333308.png 117 --> 118 </body> 119 </html>
标签：
原文地址：http://www.cnblogs.com/sun-rain/p/4810894.html
