1 <!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 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>jQuery Slideshow</title>
6
7 <style type="text/css">
8 body{text-align:center;font-family:Arial, Helvetica, sans-serif;}
9 small{font:15px Verdana, Arial, Helvetica, sans-serif;display:block;margin-bottom:15px;}
10 #slideshow{position:relative;height:195px;width:425px;border:10px solid #ddd;margin:0 auto 15px;}
11 #slideshow div{position:absolute;top:0;left:0;z-index:3;opacity:0.0;height:195px;overflow:hidden;background-color:#FFF;}
12 #slideshow div.current{z-index:5;}
13 #slideshow div.prev{z-index:4;}
14 #slideshow div img{display:block;border:0;margin-bottom:10px;}
15 #slideshow div span{display:none;position:absolute;bottom:0;left:0;height:50px;line-height:50px;background:#000;color:#fff;width:100%;}
16 </style>
17
18 </head>
19
20 <body>
21
22 <h1><a href="http://www.happinesz.cn/archives/1015/" title="">jQuery Slideshow</a></h1>
23 <small>轮换时间为3秒, 图片宽度为425px</small>
24
25 <div id="slideshow">
26 <div class="current">
27 <a href="http://www.happinesz.cn/"><img src="1.jpg" alt="" /></a>
28 <span>The First Image</span>
29 </div>
30 <div>
31 <a href="http://www.happinesz.cn/"><img src="2.jpg" alt="" /></a>
32 <span>The Second Image</span>
33 </div>
34 <div>
35 <a href="http://www.happinesz.cn/"><img src="3.jpg" alt="" /></a>
36 <span>Yes, thd third.</span>
37 </div>
38 <div>
39 <a href="http://www.happinesz.cn/"><img src="4.jpg" alt="" /></a>
40 <span>1.2.3.4...</span>
41 </div>
42 <div>
43 <a href="http://www.happinesz.cn/"><img src="5.jpg" alt="" /></a>
44 <span>The Last Images</span>
45 </div>
46 </div>
47
48 <div>created by <a href="http://www.happinesz.cn/" title="sofish">sofish</a></div>
49
50 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
51
52 <script type="text/javascript">
53 function slideSwitch() {
54 var $current = $("#slideshow div.current");
55
56 // 判断div.current个数为0的时候 $current的取值
57 if ( $current.length == 0 ) $current = $("#slideshow div:last");
58
59 // 判断div.current存在时则匹配$current.next(),否则转到第一个div
60 var $next = $current.next().length ? $current.next() : $("#slideshow div:first");
61 $current.addClass('prev');
62
63 $next.css({opacity: 0.0}).addClass("current").animate({opacity: 1.0}, 1000, function() {
64 //因为原理是层叠,删除类,让z-index的值只放在轮转到的div.current,从而最前端显示
65 $current.removeClass("current prev");
66 });
67 }
68
69 $(function() {
70 $("#slideshow span").css({"opacity":"0.7","display":"block"});
71 $(".current").css("opacity","1.0");
72
73 // 设定时间为3秒(1000=1秒)
74 setInterval( "slideSwitch()", 3000 );
75 });
76 </script>
77
78 </body>
79 </html>
