复制代码 代码如下:
<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 > <img src="images/74389.gif" /> </span>
<span > <img src="images/77904.jpg" /> </span>
<span > <img src="images/81177.jpg" /> </span>
<span > <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>
您可能感兴趣的文章:Android实现图片滚动和页签控件功能的实现代码Android仿淘宝商品浏览界面图片滚动效果图片自动播放器编程小技巧修正JS特效实现图片自动播放并可控的效果基于Jquery实现的一个图片滚动切换jquery 圆形旋转图片滚动切换效果JQuery 图片滚动轮播示例代码js实现网站首页图片滚动显示jQuery+css实现图片滚动效果(附源码)jquery实现图片滚动效果的简单实例js+div实现图片滚动效果代码ImageFlow可鼠标控制图片滚动javascript 不间断的图片滚动并可点击js实现鼠标经过时图片滚动停止的方法Android使用自定义属性实现图片自动播放滚动的功能 总结
以上是内存溢出为你收集整理的autoPlay 基于jquery的图片自动播放效果全部内容，希望文章能够帮你解决autoPlay 基于jquery的图片自动播放效果所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）