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 相关文章推荐
js确定对象类型方法
Mar 30 Javascript
Javascript Web Slider 焦点图示例源码
Oct 10 Javascript
jQuery固定元素插件scrolltofixed使用指南
Apr 21 Javascript
js创建jsonArray传输至后台及后台全面解析
Apr 11 Javascript
动态加载js、css的简单实现代码
May 26 Javascript
浅析ES6的八进制与二进制整数字面量
Aug 30 Javascript
Vue2.0 从零开始_环境搭建操作步骤
Jun 14 Javascript
ztree简介_动力节点Java学院整理
Jul 19 Javascript
Angular4实现图片上传预览路径不安全的问题解决
Dec 25 Javascript
vue-router懒加载速度缓慢问题及解决方法
Nov 25 Javascript
vue学习笔记之slot插槽用法实例分析
Feb 29 Javascript
vue 子组件修改data或调用操作
Aug 07 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
php xfocus防注入资料
2008/04/27 PHP
一贴学会PHP 新手入门教程
2009/08/03 PHP
探讨:如何通过stats命令分析Memcached的内部状态
2013/06/14 PHP
PHP fopen中文文件名乱码问题解决方案
2020/10/28 PHP
jquery 弹出层实现代码
2009/10/30 Javascript
一个简单的jquery进度条示例
2014/04/28 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
2014/10/17 Javascript
jQuery中contents()方法用法实例
2015/01/08 Javascript
DOM基础教程之使用DOM控制表格
2015/01/20 Javascript
JavaScript中的时间处理小结
2016/02/24 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
2016/07/05 Javascript
学习Javascript闭包(Closure)知识
2016/08/07 Javascript
使用jquery如何获取时间
2016/10/13 Javascript
JS双击变input框批量修改内容
2016/12/12 Javascript
js时间戳和c#时间戳互转方法(推荐)
2017/02/15 Javascript
详解nodejs中的process进程
2017/03/19 NodeJs
BootStrap daterangepicker 双日历控件
2017/06/02 Javascript
浅谈Node.js ORM框架Sequlize之表间关系
2017/07/24 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
2017/11/14 Javascript
vue轮播图插件vue-awesome-swiper
2017/11/27 Javascript
微信网页授权并获取用户信息的方法
2018/07/30 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
2019/04/12 Javascript
Vue props中Object和Array设置默认值操作
2020/07/30 Javascript
使用python 获取进程pid号的方法
2014/03/10 Python
在pytorch中查看可训练参数的例子
2019/08/18 Python
利用python绘制正态分布曲线
2021/01/04 Python
css3模拟jq点击事件的实例代码
2017/07/06 HTML / CSS
X/HTML5 和 XHTML2
2008/10/17 HTML / CSS
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
2017/08/24 HTML / CSS
大一学生的职业生涯规划书范文
2014/01/19 职场文书
超市采购员岗位职责
2014/02/01 职场文书
文明宿舍获奖感言
2014/02/07 职场文书
个人简历求职信范文
2015/03/20 职场文书
2015年安全生产工作总结范文
2015/04/02 职场文书
2015初中教导处工作总结
2015/07/21 职场文书
聊聊基于pytorch实现Resnet对本地数据集的训练问题
2022/03/25 Python