jQuery 插件 jCarousel Lite 图片横向轮播
效果图
Code1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4
5 <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
6
7 <script type="text/javascript" src="jcarousellite_1.0.1.min.js"></script>
8
9 <style type="text/css">
10
11 .prev
12 {
13 background-image:url(left.gif);
14 height:166px;
15 float:left;
16 width:30px;
17 }
18 .next
19 {
20 background-image:url(right.gif);
21 height:166px;
22 float:left;
23 width:30px;
24 }
25 .anyClass
26 {
27 background-image:url(center.gif);
28 background-repeat:repeat-x;
29 width: 800px;
30 height:166px;
31 float:left;
32 padding-top:10px;
33 }
34 .anyClass li
35 {
36 text-align:center;
37 }
38 </style>
39 </head>
40 <body>
41 <div class="prev" >
42 </div>
43 <div class="anyClass">
44 <ul>
45 <li>
46 <img src="Blue hills.jpg" alt="" width="235" height="130"><br />
47 adsfjkl</li>
48 <li>
49 <img src="Sunset.jpg" alt="" width="235" height="130"><br />
50 adsfjkl</li>
51 <li>
52 <img src="Water lilies.jpg" alt="" width="235" height="130"><br />
53 adsfjkl</li>
54 <li>
55 <img src="Winter.jpg" alt="" width="235" height="130"><br />
56 adsfjkl</li>
57 </ul>
58 </div>
59 <div class="next">
60 </div>
61
62 <script>
63 $(function() {
64 $(".anyClass").jCarouselLite({
65 btnNext: ".next",
66 btnPrev: ".prev",
67 visible: 4
68 });
69 });
70 setInterval(function(){
71 $(".next").click();
72 },2000);
73 </script>
74
75 </body>
76 </html>
77
