autoPlay 基于jquery的图片自动播放效果

效果图:实现代码:复制代码代码如下: <html> <head> <title>Jquery 自动轮播效果</title> <script src="js/jquery-1.6.2.min.js" type="text/javascript"></script> <style> .spanhide{display: none;} #top a:hover{color: red;} </style> </head> <body> <div id = "main"> <div id = "top"> <a href="javascript:void(0)">1</a> <a href="javascript:void(0)">2</a> <a href="javascript:void(0)">3</a> <a href="javascript:void(0)">4</a> <a href="javascript:void(0)">5</a> </div> <div id = "tbody"> <span> <img src="images/24877.jpg" /> </span> <span class="spanhide"> <img src="images/74389.gif" /> </span> <span class="spanhide"> <img src="images/77904.jpg" /> </span> <span class="spanhide"> <img src="images/81177.jpg" /> </span> <span class="spanhide"> <img src="images/93144.jpg" /> </span> </div> </div> </body> <script type="text/javascript"> $(function(){ var i = 0; var f = 0; var t; var tops = $("#top a"); var tl = tops.length; var bodys = $("#tbody span"); tops.mouseover(function(){ i = $.inArray(this,tops); bodys.hide().eq(i).show(); i++; i = i>=tl?0:i; if (f == 1) { t = setTimeout(mmover,2000); } else{ stop(); } f = 0; }); bodys.mouseover(function(){ stop(); }); bodys.mouseout(function(){ t = setTimeout(mmover,2000); }); tops.mouseout(function(){ t = setTimeout(mmover,2000); }); mmover(); function stop(){ clearTimeout(t); } function mmover(){ f = 1; tops.eq(i).mouseover(); } }); </script> </html>

　　推荐阅读

　　Javascript base64编码实现代码

复制代码代码如下: /* * base64编码 */ var base64EncodeChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/"; var base64DecodeChars = new Array( 　　-1, -1, -1, -1, -1, -1, -1, ->>>详细阅读

本文标题：autoPlay 基于jquery的图片自动播放效果

地址：http://www.17bianji.com/kaifa2/JS/23859.html

1/2 1