基于Jquery的简单图片切换效果

ttx9n · 发表于 2011-1-6 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>

u6h2m4 · 发表于 2022-9-21 14:45:08

挺不错的东西

0608fv3 · 发表于 2022-11-21 20:41:15

啪啪啪生怕PSP怕

额呵呵 · 发表于 2023-5-30 03:37:29

呵呵呵呵呵呵呵a

0vwrdf6 · 发表于 2023-11-13 04:02:50

老大你好你好好你好

醉梦娱乐网 · 发表于 2024-3-2 07:12:52

。。。。。。。。。。。。。。。

errol123 · 发表于 2024-3-23 07:12:15

啦啦啦啦啦啦哈哈哈

gyalp · 发表于 2024-5-13 05:45:48

看看看看

95nd4ba · 发表于 2024-6-8 12:22:24

先把创新班才能下班才能下班

4k0mp7m · 发表于 2024-8-28 13:34:03

看看看看

账号		自动登录	找回密码
密码			立即注册

[JavaScript] 基于Jquery的简单图片切换效果

相关帖子