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 相关文章推荐
神奇的代码 通杀各种网站-可随意修改复制页面内容
Jul 17 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
Jul 08 Javascript
Jquery响应回车键直接提交表单操作代码
Jul 25 Javascript
超棒的响应式布局jQuery插件Freetile.js
Nov 17 Javascript
在Javascript中处理数组之toSource()方法的使用
Jun 09 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
Sep 21 Javascript
ReactNative-JS 调用原生方法实例代码
Oct 08 Javascript
JS实现select选中option触发事件操作示例
Jul 13 Javascript
详解Puppeteer前端自动化测试实践
Feb 21 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
Apr 20 Javascript
javaScript把其它类型转换为Number类型
Oct 13 Javascript
JS实现水平移动与垂直移动动画
Dec 19 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
Windows下的PHP5.0安装配制详解
2006/09/05 PHP
laravel 5 实现模板主题功能(续)
2015/03/02 PHP
JavaScript设计模式之原型模式(Object.create与prototype)介绍
2014/12/28 Javascript
jQuery中bind()方法用法实例
2015/01/19 Javascript
纯js实现无限空间大小的本地存储
2015/06/18 Javascript
jQuery实现网页抖动的菜单抖动效果
2015/08/07 Javascript
详解JavaScript正则表达式之RegExp对象
2015/12/13 Javascript
分享javascript实现的冒泡排序代码并优化
2016/06/05 Javascript
Jquery ajax请求导出Excel表格的实现代码
2016/06/08 Javascript
通过JS获取Request.QueryString()参数的值实现方法
2016/09/27 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
2016/12/22 Javascript
使用JavaScript为一张图片设置备选路径的方法
2017/01/04 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
2017/02/14 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
2017/07/07 Javascript
nodejs async异步常用函数总结(推荐)
2017/11/17 NodeJs
常用的9个JavaScript图表库详解
2017/12/19 Javascript
你点的 ES6一些小技巧,请查收
2018/04/25 Javascript
原生JS实现的简单轮播图功能【适合新手】
2018/08/17 Javascript
微信小程序实现随机验证码功能
2018/12/20 Javascript
JS highcharts实现动态曲线代码示例
2020/10/16 Javascript
Python常用知识点汇总
2016/05/08 Python
利用python实现微信头像加红色数字功能
2018/03/26 Python
Python使用re模块正则提取字符串中括号内的内容示例
2018/06/01 Python
修复 Django migration 时遇到的问题解决
2018/06/14 Python
Linux下多个Python版本安装教程
2018/08/15 Python
tensorflow 限制显存大小的实现
2020/02/03 Python
Python os模块常用方法和属性总结
2020/02/20 Python
Python json读写方式和字典相互转化
2020/04/18 Python
AmazeUI在模态框中嵌入表单形成模态输入框
2020/08/20 HTML / CSS
护理专业毕业生自我鉴定总结
2014/03/24 职场文书
《青海高原一株柳》教学反思
2014/04/25 职场文书
国际会计专业求职信
2014/08/04 职场文书
预备党员党支部意见
2015/06/02 职场文书
辩论赛新闻稿
2015/07/17 职场文书
JavaScript中的宏任务和微任务详情
2021/11/27 Javascript
asyncio异步编程之Task对象详解
2022/03/13 Python