基于Jquery的简单图片切换效果
更新时间：2011年01月06日 23:05:09 作者：
Jquery实现简单图片切换效果代码，需要的朋友可以参考下。
复制代码 代码如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
var t;
var speed = 2;//图片切换速度
var nowlan=0;//图片开始时间
function changepic() {
var imglen = $("div[name='pic']").find("div").length;
$("div[name='pic']").find("div").hide();
$("div[name='pic']").find("div").eq(nowlan).show();
nowlan = nowlan+1 ==imglen ?0:nowlan + 1;
t = setTimeout("changepic()", speed * 1000);
}
onload = function () { changepic(); }
$(document).ready(function () {
//鼠标在图片上悬停让切换暂停
$("div[name='pic']").hover(function () { clearInterval(t); });
//鼠标离开图片切换继续
$("div[name='pic']").mouseleave(function () { changepic(); });
});
</script>
</head>
<body>
<div name="pic" style="float:left; position:relative;overflow:hidden;width:300px;height:240px;" >
<div><img width="300" height="240" src="Chrysanthemum.jpg" alt="1"/></div>
<div><img width="300" height="240" src="Desert.jpg" alt="2"/></div>
<div><img width="300" height="240" src="Hydrangeas.jpg" alt="3"/></div>
</div>
</body>
</html>
相关文章
大家在逛淘宝的时候，把鼠标放在宝贝上就会放大，奇怪这种效果怎么实现的，下面小编就给大家分享基于jquery实现放大镜效果，有需要的朋友可以参考下2015-08-08
使用jQuery不判断浏览器高度解决iframe自适应高度问题
这篇文章主要介绍了使用jQuery不判断浏览器高度解决iframe自适应高度问题,需要的朋友可以参考下2014-12-12
对于想学习jquery 的朋友可以看下这样的入门级文章。2009-04-04
jquery实现的回旋滚动效果完整实例【附demo源码下载】
这篇文章主要介绍了jquery实现的回旋滚动效果,可实现点击后侧图片呈现立体翻转切换的功能,涉及jQuery插件roundabout.js的使用,并附带了完整实例demo源码供读者下载参考,需要的朋友可以参考下2016-09-09
这篇文章给大家介绍了jquery自定义图片上传插件的实例代码，非常不错，具有参考借鉴价值，需要的朋友一起看看吧2017-04-04
jquery 学习之二 属性(类),需要的朋友可以参考下。2010-11-11
本文分享一段基于jQuery实现的复选框全选、全不选、反选功能的代码，有需要的小伙伴直接带走吧2014-11-11
这篇文章主要介绍了jQuery中 $("a").click()无效问题分析,需要的朋友可以参考下2015-01-01
jQuery中的.bind()、.live()和.delegate()之间区别分析
jQuery中的.bind()、.live()和.delegate()之间区别分析，学习jquery的朋友可以参考下。2011-06-06
这篇文章介绍了Jquery倒数计时按钮setTimeout的实例，有需要的朋友可以参考一下2013-07-07
最新评论