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 相关文章推荐
JS 实现完美include载入实现代码
Aug 05 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
Jan 23 Javascript
JS中typeof与instanceof之间的区别总结
Nov 14 Javascript
浅析js中的浮点型运算问题
Jan 06 Javascript
Javascript实现单例模式
Jan 24 Javascript
javascript iframe跨域详解
Oct 26 Javascript
微信小程序商城项目之侧栏分类效果(1)
Apr 17 Javascript
BACKBONE.JS 简单入门范例
Oct 17 Javascript
基于input动态模糊查询的实现方法
Dec 12 Javascript
微信小程序实现的canvas合成图片功能示例
May 03 Javascript
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
用显卡加速,轻松把笔记本打造成取暖器的办法!
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
fleaphp rolesNameField bug解决方法
2011/04/23 PHP
php页面防重复提交方法总结
2013/11/25 PHP
smarty中英文多编码字符截取乱码问题解决方法
2014/10/28 PHP
PHP框架Laravel插件Pagination实现自定义分页
2020/04/22 PHP
Laravel中间件实现原理详解
2016/10/09 PHP
使用Yii2实现主从数据库设置
2016/11/20 PHP
Tips 带三角可关闭的文字提示
2010/10/06 Javascript
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
2011/04/01 Javascript
真正的JQuery.ajax传递中文参数的解决方法
2011/05/28 Javascript
让AJAX不依赖后端接口实现方案
2012/12/03 Javascript
javascript对select标签的控制(option选项/select)
2013/01/31 Javascript
把input初始值不写value的具体实现方法
2013/07/04 Javascript
JavaScript splice()方法详解
2020/09/22 Javascript
JS中的数组的sort方法使用示例
2014/01/22 Javascript
JS对img标签进行优化使用onerror显示默认图像
2014/04/24 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
2014/10/17 Javascript
JavaScript中发布/订阅模式的简单实例
2014/11/05 Javascript
JS控制表单提交的方法
2015/07/09 Javascript
基于jQuery的Web上传插件Uploadify使用示例
2016/05/19 Javascript
JQuery判断正整数整理小结
2017/08/21 jQuery
BootStrap入门学习第一篇
2017/08/28 Javascript
nodejs使用node-xlsx生成excel的方法示例
2019/08/22 NodeJs
vue 中 elment-ui table合并上下两行相同数据单元格
2019/12/26 Javascript
Python中类的继承代码实例
2014/10/28 Python
Python中实现对Timestamp和Datetime及UTC时间之间的转换
2015/04/08 Python
Python中的hypot()方法使用简介
2015/05/18 Python
python脚本设置超时机制系统时间的方法
2016/02/21 Python
Python3中的bytes和str类型详解
2019/05/02 Python
css3的transition效果和transfor效果示例介绍
2013/10/30 HTML / CSS
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
2017/08/15 HTML / CSS
关于梦想的演讲稿
2014/05/05 职场文书
计算机应用应届生求职信
2014/07/12 职场文书
解放思想大讨论活动心得体会
2014/09/11 职场文书
2014年保卫部工作总结
2014/11/21 职场文书
Redis命令处理过程源码解析
2022/02/12 Redis
Nginx如何获取自定义请求header头和URL参数详解
2022/07/23 Servers