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=><a href=><a href=><a href=><a href=></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>

上一个：电子商务网站上的常用的js放大镜效果
下一个：整理8个很棒的 jQuery 倒计时插件和教程

更多图片编程知识: