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


Posted in Javascript onJanuary 06, 2011
<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>
Javascript 相关文章推荐
jQuery中的常用事件总结
Dec 27 Javascript
jquery 学习之二 属性(类)
Nov 25 Javascript
js判断undefined类型示例代码
Feb 10 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
May 22 Javascript
Javascript中For In语句用法实例
May 14 Javascript
使用JQuery实现的分页插件分享
Nov 05 Javascript
ES6概念 ymbol.for()方法
Dec 25 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
详解使用vue-admin-template的优化历程
May 20 Javascript
微信小程序swiper实现滑动放大缩小效果
Nov 15 Javascript
vue draggable resizable gorkys与v-chart使用与总结
Sep 05 Javascript
layui使用form表单实现post请求页面跳转的方法
Sep 14 Javascript
基于jquery的分页控件(C#)
Jan 06 #Javascript
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
Jan 06 #Javascript
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
Jan 06 #Javascript
基于jQuery的试卷自动排版系统实现代码
Jan 06 #Javascript
ASP中Sub和Function的区别说明
Aug 30 #Javascript
TBCompressor js代码压缩
Jan 05 #Javascript
关于Mozilla浏览器不支持innerText的解决办法
Jan 01 #Javascript
You might like
PHP开发文件系统实例讲解
2006/10/09 PHP
用php获取远程图片并把它保存到本地的代码
2008/04/07 PHP
排序算法之PHP版快速排序、冒泡排序
2014/04/09 PHP
Laravel Memcached缓存驱动的配置与应用方法分析
2016/10/08 PHP
浅谈PHP中try{}catch{}的使用方法
2016/12/09 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
两个DIV等高的JS的实现代码
2007/12/23 Javascript
用JQuery实现表格隔行变色和突出显示当前行的代码
2012/02/10 Javascript
Jquery 自定义动画概述及示例
2013/03/29 Javascript
判断在css加载完毕后执行后续代码示例
2014/09/03 Javascript
TypeScript入门-基本数据类型
2017/03/28 Javascript
JS算法题之查找数字在数组中的索引位置
2019/05/15 Javascript
vue中 this.$set的用法详解
2019/09/06 Javascript
layui table 获取分页 limit的方法
2019/09/20 Javascript
vue-cli设置publicPath小记
2020/04/14 Javascript
在webstorm中配置less的方法详解
2020/09/25 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
2020/11/05 Javascript
[03:00]《DAC最前线》之欧美新秀VS老将
2015/02/01 DOTA
python定时器(Timer)用法简单实例
2015/06/04 Python
Python实现程序判断季节的代码示例
2019/01/28 Python
Python3.5内置模块之time与datetime模块用法实例分析
2019/04/27 Python
django中上传图片分页三级联动效果的实现代码
2019/08/30 Python
TensorBoard 计算图的可视化实现
2020/02/15 Python
jupyter notebook tensorflow打印device信息实例
2020/04/20 Python
python os模块常用的29种方法使用详解
2020/06/02 Python
python raise的基本使用
2020/09/10 Python
HTML高亮关键字的实现代码
2018/10/22 HTML / CSS
探究 canvas 绘图中撤销(undo)功能的实现方式详解
2018/05/17 HTML / CSS
记一次高分屏下canvas模糊问题
2020/02/17 HTML / CSS
史泰博(Staples)中国官方网站:办公用品一站式采购
2016/09/05 全球购物
财务会计专业毕业生自荐信
2013/10/02 职场文书
一名女生的自荐信
2013/12/08 职场文书
老师的检讨书
2014/02/23 职场文书
保险经纪人求职信
2014/03/11 职场文书
体育节口号
2014/06/19 职场文书
护士年终工作总结不会写?各科护士模板总结
2020/01/02 职场文书