autoPlay 基于jquery的图片自动播放效果
更新时间：2011年12月07日 23:27:46 作者：
效果类似这种，自动播放，实质控制层的显示隐藏。需要的朋友可以参考下。
效果图:
实现代码:
<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>
实现代码:
复制代码 代码如下:
<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>
您可能感兴趣的文章:
相关文章
JQuery是一个很优秀的JS框架，我们在做ajax项目开发是避免不了使用该框架来实现一些ajax的效果，其中该框架中有一个load()方法，该方法是用来在页面不刷新的情况下动态装载服务器端的文件。2009-09-09
首先，我们要准备的文件有jquery.js,jquery.pagination.js,pagination.css,还有一个就是经常用的table布局的css文件。这些文件都会在后面的文件中包含。2009-10-10
这篇文章主要介绍了jquery+ajax直接提交表单的方法,涉及jQuery调用ajax进行表单提交所涉及的表单序列化、数值传递与处理、回调函数等相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2016-06-06
这篇文章主要介绍了jQuery移动开发中内联按钮和分组按钮的编写方法,基于jQuery mobile这个jQuery针对移动开发版的库,需要的朋友可以参考下2015-12-12
这篇文章主要介绍了jQuery获取动态添加元素的方法详解,jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库,它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了EasyUI在表单提交之前进行验证的实例代码的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-06-06
input:checkbox多选框实现单选效果跟radio一样
checkbox是多选，怎么才能让他变成单选，效果跟radio一样呢，本菜鸟就自己写了个小程序，代码很简单2014-06-06
基于jQuery 实现bootstrapValidator下的全局验证
这篇文章主要介绍了基于jQuery 实现bootstrapValidator下的全局验证 的相关资料,需要的朋友可以参考下2015-12-12
这篇文章主要介绍了jQuery cookie的公共方法封装和使用,结合实例形式详细分析了jQuery cookie的设置、获取、删除等方法封装与使用相关操作技巧,需要的朋友可以参考下2020-06-06
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
这篇文章主要介绍了JavaScript实现的弹出遮罩层特效,结合实例形式分析了基于jQuery实现的页面元素与属性动态操作相关使用技巧,需要的朋友可以参考下2019-07-07
最新评论