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 相关文章推荐
div层的移动及性能优化
Nov 16 Javascript
jQuery $.data()方法使用注意细节
Dec 31 Javascript
HTML5之WebSocket入门3 -通信模型socket.io
Aug 21 Javascript
基于WebUploader的文件上传js插件
Aug 19 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
Aug 23 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
May 25 Javascript
微信小程序自动客服功能
Nov 02 Javascript
聊聊JS动画库 Velocity.js的使用
Mar 13 Javascript
ES6与CommonJS中的模块处理的区别
Jun 13 Javascript
JS实现数组深拷贝的方法分析
Mar 06 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
Sep 10 Javascript
JS实现星星海特效
Dec 24 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
用PHP生成自己的LOG文件
2006/10/09 PHP
配置支持SSI
2006/11/25 PHP
PHP判断函数是否被定义的方法
2019/06/21 PHP
PHP与Web页面的交互示例详解一
2020/08/04 PHP
鼠标移动到一张图片时变为另一张图片
2006/12/05 Javascript
javascript之通用简单的table选项卡实现(二)
2010/05/09 Javascript
jQuery .tmpl(), .template()学习资料小结
2011/07/18 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
2014/04/30 Javascript
21个JavaScript事件(Events)属性汇总
2014/12/02 Javascript
jQuery多级弹出菜单插件ZoneMenu
2014/12/18 Javascript
javascript下拉框选项单击事件的例子分享
2015/03/04 Javascript
实例详解ECMAScript5中新增的Array方法
2016/04/05 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
2016/05/16 Javascript
检查表单元素的值是否为空的实例代码
2016/06/16 Javascript
用jQuery的AJax实现异步访问、异步加载
2016/11/02 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
2017/01/06 Javascript
nodejs中express入门和基础知识点学习
2018/09/13 NodeJs
Node.js模拟发起http请求从异步转同步的5种用法
2018/09/26 Javascript
微信小程序封装自定义弹窗的实现代码
2019/05/08 Javascript
nodejs 递归拷贝、读取目录下所有文件和目录
2019/07/18 NodeJs
[26:40]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第一局
2016/02/25 DOTA
python局部赋值的规则
2013/03/07 Python
Python入门Anaconda和Pycharm的安装和配置详解
2019/07/16 Python
解决tensorflow 释放图,删除变量问题
2020/06/23 Python
关于python scrapy中添加cookie踩坑记录
2020/11/17 Python
前端使用canvas生成盲水印的加密解密的实现
2020/12/16 HTML / CSS
lookfantastic荷兰:在线购买奢华护肤、护发和化妆品
2018/11/27 全球购物
荷兰在线啤酒店:Beerwulf
2019/08/26 全球购物
母亲节感恩寄语
2014/02/21 职场文书
中学教师暑期培训方案
2014/08/27 职场文书
新党章的学习心得体会
2014/11/07 职场文书
高考升学宴答谢词
2015/01/20 职场文书
实习介绍信模板
2015/01/30 职场文书
2019公司管理制度
2019/04/19 职场文书
python 模拟在天空中放风筝的示例代码
2021/04/21 Python
Oracle11g r2 卸载干净重装的详细教程(亲测有效已重装过)
2021/06/04 Oracle