jq实现多banner效果图 

  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">&lt;</a>
 31         <a href="#" class="next">&gt;</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">&lt;</a>
 41         <a href="#" class="next">&gt;</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">&lt;</a>
 51         <a href="#" class="next">&gt;</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>
View Code

 

posted @ 2015-09-15 17:31  悬崖边上  阅读(403)  评论(0)    收藏  举报