首页 / JQUERY / autoPlay 基于jquery的图片自动播放效果

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了autoPlay 基于jquery的图片自动播放效果，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1387字，纯文字阅读大概需要2分钟。

内容图文

效果图:
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>

内容总结

以上是互联网集市为您收集整理的autoPlay 基于jquery的图片自动播放效果全部内容，希望文章能够帮你解决autoPlay 基于jquery的图片自动播放效果所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/368739.html

来源：【匿名】