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 相关文章推荐
原生JavaScript编写俄罗斯方块
Mar 30 Javascript
JS实现简单的键盘打字的效果
Apr 24 Javascript
js简单时间比较的方法
Aug 02 Javascript
jQuery extend()详解及简单实例
May 06 jQuery
微信小程序与php 实现微信支付的简单实例
Jun 23 Javascript
js单页hash路由原理与应用实战详解
Aug 14 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
Aug 14 Javascript
利用原生JavaScript实现造日历轮子实例代码
May 08 Javascript
浅谈Vue.set实际上是什么
Oct 17 Javascript
Vue的click事件防抖和节流处理详解
Nov 13 Javascript
react 原生实现头像滚动播放的示例
Apr 21 Javascript
Jquery+javascript实现支付网页数字键盘
Dec 21 jQuery
用显卡加速,轻松把笔记本打造成取暖器的办法!
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
drupal 代码实现URL重写
2011/05/04 PHP
PHP新手用的Insert和Update语句构造类
2012/03/31 PHP
ThinkPHP提交表单时默认自动转义的解决方法
2014/11/25 PHP
PHP中的命名空间相关概念浅析
2015/01/22 PHP
简单PHP会话(session)说明介绍
2016/08/21 PHP
理解Javascript_10_对象模型
2010/10/16 Javascript
js常用排序实现代码
2010/12/28 Javascript
Javascript面向对象扩展库代码分享
2012/03/27 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
2013/08/01 Javascript
nodejs中转换URL字符串与查询字符串详解
2014/11/26 NodeJs
js实现完美兼容各大浏览器的人民币大小写相互转换
2015/10/29 Javascript
JS基础随笔(菜鸟必看篇)
2016/07/13 Javascript
常用的js方法合集
2017/03/10 Javascript
原生js轮播特效
2017/05/18 Javascript
详解Vue使用命令行搭建单页面应用
2017/05/24 Javascript
vue.js项目nginx部署教程
2018/04/05 Javascript
javascript 内存模型实例详解
2020/04/18 Javascript
微信小程序订阅消息(java后端实现)开发
2020/06/01 Javascript
[02:57]DOTA2亚洲邀请赛小组赛第四日 赛事回顾
2015/02/02 DOTA
[02:12]打造更好的电竞完美世界:完美盛典回顾篇
2018/12/19 DOTA
Python标准库defaultdict模块使用示例
2015/04/28 Python
对变量赋值的理解--Pyton中让两个值互换的实现方法
2017/11/29 Python
python3+mysql查询数据并通过邮件群发excel附件
2018/02/24 Python
Diango + uwsgi + nginx项目部署的全过程(可外网访问)
2018/04/22 Python
python快排算法详解
2019/03/04 Python
Django中的FBV和CBV用法详解
2019/09/15 Python
keras获得model中某一层的某一个Tensor的输出维度教程
2020/01/24 Python
Python3如何判断三角形的类型
2020/04/12 Python
基于django 的orm中非主键自增的实现方式
2020/05/18 Python
魔声耳机官方网站:Monster是世界第一品牌的高性能耳机
2016/10/26 全球购物
美国生鲜及杂货电商:FreshDirect
2018/01/29 全球购物
应届生服装设计自我评价
2013/09/20 职场文书
2014公安机关纪律作风整顿思想汇报
2014/09/13 职场文书
优秀党员自我评价范文
2014/09/15 职场文书
2015年学生会纪检部工作总结
2015/03/31 职场文书
python元组打包和解包过程详解
2021/08/02 Python