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写的一个TableView控件代码
Jan 23 Javascript
学习面向对象之面向对象的基本概念:对象和其他基本要素
Nov 30 Javascript
通过JS来判断页面控件是否获取焦点
Jan 03 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
Dec 11 Javascript
基于JavaScript实现的希尔排序算法分析
Apr 14 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
Feb 24 Javascript
.vue文件 加scoped 样式不起作用的解决方法
May 28 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
Nov 20 Javascript
通过npm或yarn自动生成vue组件的方法示例
Feb 12 Javascript
Node.js如何对SQLite的async/await封装详解
Feb 14 Javascript
vue 源码解析之虚拟Dom-render
Aug 26 Javascript
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 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
php IP转换整形(ip2long)的详解
2013/06/06 PHP
解析php mysql 事务处理回滚操作(附实例)
2013/08/05 PHP
php根据分类合并数组的方法实例详解
2013/11/06 PHP
Yii2 rbac权限控制操作步骤实例教程
2016/04/29 PHP
php注册审核重点解析(数据访问)
2017/05/23 PHP
document.compatMode的CSS1compat使用介绍
2014/04/03 Javascript
Nodejs中自定义事件实例
2014/06/20 NodeJs
JavaScript动态创建form表单并提交的实现方法
2015/12/10 Javascript
谈谈JavaScript类型系统之Math
2016/01/06 Javascript
jquery根据一个值来选中select下的option实例代码
2016/08/29 Javascript
利用jquery实现下拉框的禁用与启用
2016/12/07 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
2016/12/12 Javascript
微信小程序 require机制详解及实例代码
2016/12/14 Javascript
nodejs 实现钉钉ISV接入的加密解密方法
2017/01/16 NodeJs
JavaScript制作简易计算器(不用eval)
2017/02/05 Javascript
JavaScript中三种常见的排序方法
2017/02/24 Javascript
微信小程序自定义多选事件的实现代码
2018/05/17 Javascript
vue中axios的封装问题(简易版拦截,get,post)
2018/06/15 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
2019/01/06 Javascript
vue+elementUI组件table实现前端分页功能
2020/11/15 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
2020/07/24 Javascript
[02:54]DOTA2亚洲邀请赛 VG战队出场宣传片
2015/02/07 DOTA
python使用7z解压apk包的方法
2015/04/18 Python
Python模拟登录的多种方法(四种)
2018/06/01 Python
解决python3中的requests解析中文页面出现乱码问题
2019/04/19 Python
python如何解析配置文件并应用到项目中
2019/06/27 Python
Django 权限认证(根据不同的用户,设置不同的显示和访问权限)
2019/07/24 Python
pytorch 输出中间层特征的实例
2019/08/17 Python
python Plotly绘图工具的简单使用
2020/03/03 Python
购买大码女装:Lane Bryant
2016/09/07 全球购物
大学生四年生活自我鉴定
2013/11/21 职场文书
致垒球运动员加油稿
2014/02/16 职场文书
《美丽的小路》教学反思
2014/02/26 职场文书
环保建议书600字
2014/05/14 职场文书
Oracle设置DB、监听和EM开机启动的方法
2021/04/25 Oracle
yolov5返回坐标的方法实例
2022/03/17 Python