图片自动播放效果 autoPlay
1 <html>
2 <head>
3 <title>Jquery 自动轮播效果</title>
4 <script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
5 <style>
6 .spanhide{display: none;}
7 #top a:hover{color: red;}
8 </style>
9 </head>
10 <body>
11 <div id = "main">
12 <div id = "top">
13 <a href="javascript:void(0)">1</a>
14 <a href="javascript:void(0)">2</a>
15 <a href="javascript:void(0)">3</a>
16 <a href="javascript:void(0)">4</a>
17 <a href="javascript:void(0)">5</a>
18 </div>
19 <div id = "tbody">
20 <span> <img src="images/24877.jpg" /> </span>
21 <span class="spanhide"> <img src="images/74389.gif" /> </span>
22 <span class="spanhide"> <img src="images/77904.jpg" /> </span>
23 <span class="spanhide"> <img src="images/81177.jpg" /> </span>
24 <span class="spanhide"> <img src="images/93144.jpg" /> </span>
25 </div>
26 </div>
27 </body>
28 <script type="text/javascript">
29 $(function(){
30 var i = 0;
31 var f = 0;
32 var t;
33 var tops = $("#top a");
34 var tl = tops.length;
35 var bodys = $("#tbody span");
36 tops.mouseover(function(){
37 i = $.inArray(this,tops);
38 bodys.hide().eq(i).show();
39 i++;
40 i = i>=tl?0:i;
41 if (f == 1) {
42 t = setTimeout(mmover,2000);
43 }
44 else{
45 stop();
46 }
47 f = 0;
48 });
49
50 bodys.mouseover(function(){
51 stop();
52 });
53
54 bodys.mouseout(function(){
55 t = setTimeout(mmover,2000);
56 });
57
58 tops.mouseout(function(){
59 t = setTimeout(mmover,2000);
60 });
61
62 mmover();
63
64 function stop(){
65 clearTimeout(t);
66 }
67
68 function mmover(){
69 f = 1;
70 tops.eq(i).mouseover();
71 }
72 });
73
74 </script>
75 </html>
效果类似这种，自动播放，实质控制层的显示隐藏。
