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 相关文章推荐
xml和web特殊字符
Apr 28 Javascript
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
Jun 18 Javascript
jQuery中slice()方法用法实例
Jan 07 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
Apr 03 Javascript
JavaScript数组前面插入元素的方法
Apr 06 Javascript
Vue.js每天必学之数据双向绑定
Sep 05 Javascript
Element input树型下拉框的实现代码
Dec 21 Javascript
浅谈JS和jQuery的区别
Mar 27 jQuery
详解如何使用router-link对象方式传递参数?
May 02 Javascript
vue项目前端错误收集之sentry教程详解
May 27 Javascript
vue-cli3+typescript新建一个项目的思路分析
Aug 06 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
Aug 18 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
咖啡与水的关系
2021/03/03 冲泡冲煮
非常好的php目录导航文件代码
2006/10/09 PHP
PHP往XML中添加节点的方法
2015/03/12 PHP
PHP中预定义的6种接口介绍
2015/05/12 PHP
PHP tp5中使用原生sql查询代码实例
2020/10/28 PHP
JavaScript下通过的XMLHttpRequest发送请求的代码
2011/06/28 Javascript
DOM 中的事件处理介绍
2012/01/18 Javascript
JS实现窗口加载时模拟鼠标移动的方法
2015/06/03 Javascript
Google 地图控件集详解及实例代码
2016/08/06 Javascript
jQuery ajax MD5实现用户注册即时验证功能
2016/10/11 Javascript
微信小程序-消息提示框实例
2016/11/24 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
几种响应式文字详解
2017/05/19 Javascript
layui table单元格事件修改值的方法
2019/09/24 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
2020/04/24 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
2020/09/02 Javascript
基于ID3决策树算法的实现(Python版)
2017/05/31 Python
python中多层嵌套列表的拆分方法
2018/07/02 Python
python读取word文档,插入mysql数据库的示例代码
2018/11/07 Python
介绍一款python类型检查工具pyright(推荐)
2019/07/03 Python
python爬虫 基于requests模块的get请求实现详解
2019/08/20 Python
详解Django将秒转换为xx天xx时xx分
2019/09/27 Python
Python实现对adb命令封装
2020/03/06 Python
使用keras内置的模型进行图片预测实例
2020/06/17 Python
python高级特性简介
2020/08/13 Python
HTML5页面中尝试调起APP功能
2017/09/12 HTML / CSS
美国男装连锁零售商:Men’s Wearhouse
2016/10/14 全球购物
客户代表自我评价范例
2013/09/24 职场文书
平面设计的岗位职责
2013/11/08 职场文书
三爱活动实施方案
2014/03/19 职场文书
防沙治沙典型材料
2014/05/07 职场文书
销售团队激励口号
2014/06/06 职场文书
2014年行政后勤工作总结
2014/12/06 职场文书
Python进阶学习之带你探寻Python类的鼻祖-元类
2021/05/08 Python
Javascript设计模式之原型模式详细
2021/10/05 Javascript
类和原型的设计模式之复制与委托差异
2022/07/07 Javascript