JS对img进行操作(换图片/切图/轮换/停止)


Posted in Javascript onApril 17, 2013
<script type="text/javascript"> 
var i = 1; var n; 
function showImg() { 
if (document.getElementById('img').getAttribute("src") == "images/1.jpg") { 
document.getElementById('img').setAttribute("src","images/2.jpg"); 
} 
else { 
document.getElementById('img').setAttribute("src","images/1.jpg"); 
} 
} 
function showImg1() { 
document.getElementById('img').setAttribute("src", "images/" + i + ".jpg"); i++; 
if (i > 10) 
{ 
i = 1; 
} 
} 
function show() { 
n=setInterval(showImg1, 500); 
} 
function show1() { 
clearInterval(n); 
} 
</script> 
</head> 
<body> 
<img id="img" alt="" src="images/1.jpg" width="200" height="200" /> 
<input id="Button1" type="button" value="换图片" onclick="showImg()" /> 
<input id="Button2" type="button" value="切图" onclick="showImg1()" /> 
<input id="Button3" type="button" value="轮换" onclick="show()" /> 
<input id="Button4" type="button" value="停止轮换" onclick="show1()" /> 
</body> 
</html>
Javascript 相关文章推荐
jquery 表单下所有元素的隐藏
Jul 25 Javascript
javascript记录文本框内文字个数检测文字个数变化
Oct 14 Javascript
基于JavaScript实现动态创建表格和增加表格行数
Dec 20 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
Oct 29 Javascript
微信小程序扫描二维码获取信息实例详解
May 07 Javascript
JavaScript中的 new 命令
May 22 Javascript
详解express使用vue-router的history踩坑
Jun 05 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
Dec 11 Javascript
JavaScript监听触摸事件代码实例
Dec 30 Javascript
详解javascript void(0)
Jul 13 Javascript
Vue表单提交点击事件只允许点击一次的实例
Oct 23 Javascript
Node实现搜索框进行模糊查询
Jun 28 Javascript
用显卡加速,轻松把笔记本打造成取暖器的办法!
Apr 17 #Javascript
js跑马灯代码(自写)
Apr 17 #Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
Apr 17 #Javascript
动态加载js和css(外部文件)
Apr 17 #Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
Apr 17 #Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
Apr 17 #Javascript
关于eval 与new Function 到底该选哪个?
Apr 17 #Javascript
You might like
一个程序下载的管理程序(一)
2006/10/09 PHP
php的crc32函数使用时需要注意的问题(不然就是坑)
2015/04/21 PHP
php编程每天必学之表单验证
2016/03/01 PHP
php实现的rc4加密解密类定义与用法示例
2018/08/16 PHP
Ajax一统天下之Dojo整合篇
2007/03/24 Javascript
基于jQuery的为attr添加id title等效果的实现代码
2011/04/20 Javascript
javascript学习笔记(二) js一些基本概念
2012/06/18 Javascript
js实现交通灯效果
2017/01/13 Javascript
原生javascript实现图片放大镜效果
2017/01/18 Javascript
angularJS1 url中携带参数的获取方法
2018/10/09 Javascript
JavaScript实现页面中录音功能的方法
2019/06/04 Javascript
微信小程序 select 下拉框组件功能
2019/09/09 Javascript
Vue实现手机扫描二维码预览页面效果
2020/05/28 Javascript
原生JavaScript创建不可变对象的方法简单示例
2020/05/07 Javascript
谈谈JavaScript令人迷惑的==与+
2020/08/31 Javascript
vant中的toast轻提示实现代码
2020/11/04 Javascript
js实现有趣的倒计时效果
2021/01/19 Javascript
Python3使用PyQt5制作简单的画板/手写板实例
2017/10/19 Python
django中模板的html自动转意方法
2018/05/27 Python
python贪吃蛇游戏代码
2020/04/18 Python
通过python改变图片特定区域的颜色详解
2019/07/15 Python
详解Python time库的使用
2019/10/10 Python
Pandas-Cookbook 时间戳处理方式
2019/12/07 Python
PyQt5连接MySQL及QMYSQL driver not loaded错误解决
2020/04/29 Python
html5 canvas合成海报所遇问题及解决方案总结
2017/08/03 HTML / CSS
工程专业毕业生自荐信范文
2013/12/25 职场文书
网络维护中文求职信
2014/01/03 职场文书
秋天的怀念教学反思
2014/04/28 职场文书
幼儿教师演讲稿
2014/05/06 职场文书
小学优秀教育工作者事迹材料
2014/05/09 职场文书
销售求职信范文
2014/05/26 职场文书
教师求职信
2014/06/17 职场文书
网络文明传播志愿者活动方案
2014/08/20 职场文书
秋收起义观后感
2015/06/11 职场文书
使用vue-element-admin框架从后端动态获取菜单功能的实现
2021/04/29 Vue.js
python利用while求100内的整数和方式
2021/11/07 Python