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>
时间： 2025-01-14 01:55:49