基于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 相关文章推荐
如果文字过长,则将过长的部分变成省略号显示
Jun 26 Javascript
jquery中dom操作和事件的实例学习 下拉框应用
Dec 01 Javascript
用jquery模仿的a的title属性的例子
Oct 22 Javascript
AngularJS中isolate scope的用法分析
Nov 22 Javascript
JavaScript函数基础详解
Feb 03 Javascript
vue调用高德地图实例代码
Apr 28 Javascript
详解Angular-Cli中引用第三方库
May 21 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
Oct 10 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
Jun 14 Javascript
node.js使用yargs处理命令行参数操作示例
Feb 11 Javascript
vue实现前端列表多条件筛选
Oct 26 Javascript
JavaScript实现登录窗体
Jun 22 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设计模式之责任链模式的深入解析
2013/06/13 PHP
ThinkPHP单字母函数(快捷方法)使用总结
2014/07/23 PHP
PHP实现删除字符串中任何字符的函数
2015/08/11 PHP
非常有用的9个PHP代码片段
2016/04/06 PHP
ThinkPHP实现登录退出功能
2017/06/29 PHP
javascript之通用简单的table选项卡实现(二)
2010/05/09 Javascript
js 遍历对象的属性的代码
2011/12/29 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
2012/12/27 Javascript
js实现鼠标经过表格行变色的方法
2015/05/12 Javascript
简单的JS时钟实例讲解
2016/01/13 Javascript
Javascript ES6中数据类型Symbol的使用详解
2017/05/02 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
2017/09/05 jQuery
vue.js默认路由不加载linkActiveClass问题的解决方法
2017/12/11 Javascript
js时间戳与日期格式之间相互转换
2017/12/11 Javascript
js实现手机web图片左右滑动效果
2017/12/29 Javascript
vuex直接赋值的三种方法总结
2018/09/16 Javascript
vue项目打包上传github并制作预览链接(pages)
2019/04/19 Javascript
[02:25]DOTA2英雄基础教程 生死判决瘟疫法师
2013/12/06 DOTA
[01:18:43]2014 DOTA2华西杯精英邀请赛5 24 iG VS DK
2014/05/25 DOTA
用Python编写一个基于终端的实现翻译的脚本
2015/04/24 Python
浅谈pyhton学习中出现的各种问题(新手必看)
2017/05/17 Python
Python生成随机密码的方法
2017/06/16 Python
TensorFlow用expand_dim()来增加维度的方法
2018/07/26 Python
Python SQL查询并生成json文件操作示例
2018/08/17 Python
python判断数字是否是超级素数幂
2018/09/27 Python
Python3 pip3 list 出现 DEPRECATION 警告的解决方法
2019/02/16 Python
python绘制直方图和密度图的实例
2019/07/08 Python
pytorch之ImageFolder使用详解
2020/01/06 Python
Python实现名片管理系统
2020/02/14 Python
ALDO加拿大官网:加拿大女鞋品牌
2018/12/22 全球购物
请写出char *p与"零值"比较的if语句
2014/09/24 面试题
行政工作个人的自我评价
2014/02/13 职场文书
教书育人演讲稿
2014/09/11 职场文书
大学生求职意向书
2015/05/11 职场文书
解决jupyter notebook启动后没有token的坑
2021/04/24 Python
python和Appium的移动端多设备自动化测试框架
2022/04/26 Python