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


Posted in Javascript onDecember 07, 2011

效果图:
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>
Javascript 相关文章推荐
jquery绑定原理 简单解析与实现代码分享
Sep 06 Javascript
jQuery EasyUI API 中文文档 - Tree树使用介绍
Nov 19 Javascript
浅析jquery的js图表组件highcharts
Mar 06 Javascript
AngularJS入门教程之学习环境搭建
Dec 06 Javascript
JavaScript实现16进制颜色值转RGB的方法
Feb 09 Javascript
jQuery实现左右切换焦点图
Apr 03 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
Jun 10 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
Jul 27 Javascript
详解vue.js之绑定class和style的示例代码
Aug 24 Javascript
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
Dec 28 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
Aug 28 Javascript
Vue防止白屏添加首屏动画的实例
Oct 31 Javascript
浅析Prototype的模板类 Template
Dec 07 #Javascript
js 幻灯片的实现
Dec 06 #Javascript
字符串的replace方法应用浅析
Dec 06 #Javascript
js滚动条回到顶部的代码
Dec 06 #Javascript
javascript检测浏览器flash版本的实现代码
Dec 06 #Javascript
javascript 随机展示头像实现代码
Dec 06 #Javascript
jQuery中需要注意的细节问题小结
Dec 06 #Javascript
You might like
Ajax+PHP 边学边练 之二 实例
2009/11/24 PHP
php中将汉字转换成拼音的函数代码
2012/09/08 PHP
PHP简单预防sql注入的方法
2016/09/27 PHP
Python中使用django form表单验证的方法
2017/01/16 PHP
JS的数组的扩展实例代码
2008/07/09 Javascript
jquery 输入框数字限制插件
2009/11/10 Javascript
JavaScript数组前面插入元素的方法
2015/04/06 Javascript
Javascript中的Prototype到底是什么
2016/02/16 Javascript
vue2.0全局组件之pdf详解
2017/06/26 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
2017/07/19 Javascript
微信小程序之自定义组件的实现代码(附源码)
2018/08/02 Javascript
Javascript读写cookie的实例源码
2019/03/16 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 Javascript
解决微信小程序中的滚动穿透问题
2019/09/16 Javascript
Vue实现点击箭头上下移动效果
2020/06/11 Javascript
JQuery Ajax如何实现注册检测用户名
2020/09/25 jQuery
Python操作mysql数据库实现增删查改功能的方法
2018/01/15 Python
matlab中实现矩阵删除一行或一列的方法
2018/04/04 Python
Python Numpy计算各类距离的方法
2019/07/05 Python
python调用函数、类和文件操作简单实例总结
2019/11/29 Python
python在协程中增加任务实例操作
2021/02/28 Python
美国打印机墨水和碳粉购物网站:QuikShip Toner
2018/08/29 全球购物
大专毕业生自我评价分享
2013/11/10 职场文书
工地资料员岗位职责
2013/12/31 职场文书
保安拾金不昧表扬信
2014/01/15 职场文书
基层党支部公开承诺书
2014/05/29 职场文书
原料仓仓管员岗位职责
2014/07/08 职场文书
颂军魂爱军营演讲稿
2014/09/13 职场文书
党的群众路线教育实践活动个人对照检查材料范文
2014/09/25 职场文书
领导班子整改方案
2014/10/25 职场文书
第一军规观后感
2015/06/12 职场文书
考试后的感想
2015/08/07 职场文书
redis配置文件中常用配置详解
2021/04/14 Redis
Python OpenCV实现传统图片格式与base64转换
2021/06/13 Python
浅谈css实现背景颜色半透明的两种方法
2021/12/06 HTML / CSS
为什么MySQL8新特性会修改自增主键属性
2022/04/18 MySQL