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 相关文章推荐
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
Aug 24 Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
Apr 26 Javascript
简单的Jquery遮罩层代码实例
Nov 14 Javascript
JavaScript实现对下拉列表值进行排序的方法
Jul 15 Javascript
jQuery判断浏览器并动态调整select宽度的方法
Mar 02 Javascript
浅谈JavaScript 标准对象
Jun 02 Javascript
angularJs中datatable实现代码
Jun 03 Javascript
利用Ionic2 + angular4实现一个地区选择组件
Jul 27 Javascript
vue-router 手势滑动触发返回功能
Sep 30 Javascript
JavaScript常用事件介绍
Jan 21 Javascript
Javascript ParentNode和ChildNode接口原理解析
Mar 16 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
May 31 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
一个简洁的多级别论坛
2006/10/09 PHP
thinkphp关于简单的权限判定方法
2017/04/03 PHP
Javascript 获取链接(url)参数的方法
2009/02/15 Javascript
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
2013/01/21 Javascript
JS 按钮点击触发(兼容IE、火狐)
2013/08/07 Javascript
js判断选择的时间是否大于今天的代码
2013/08/20 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
2013/12/25 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
2016/08/23 Javascript
前端 Vue.js 和 MVVM 详细介绍
2016/12/29 Javascript
js获取ip和地区
2017/03/10 Javascript
js禁止Backspace键使浏览器后退的实现方法
2017/09/01 Javascript
ionic grid(栅格)九宫格制作详解
2018/06/30 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
2018/09/06 Javascript
Vue利用Blob下载原生二进制数组文件
2019/09/25 Javascript
vue开发简单上传图片功能
2020/06/30 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 大神专访第二弹!
2014/05/20 DOTA
跟老齐学Python之集合的关系
2014/09/24 Python
Python设计模式之观察者模式简单示例
2018/01/10 Python
Python后台管理员管理前台会员信息的讲解
2019/01/28 Python
Python实现合并excel表格的方法分析
2019/04/13 Python
在python下使用tensorflow判断是否存在文件夹的实例
2019/06/10 Python
Django {{ MEDIA_URL }}无法显示图片的解决方式
2020/04/07 Python
图解Python中深浅copy(通俗易懂)
2020/09/03 Python
CSS3实例分享--超炫checkbox复选框和radio单选框
2014/09/01 HTML / CSS
英国川宁茶官方网站:Twinings茶
2019/05/21 全球购物
革命先烈的英雄事迹材料
2014/02/15 职场文书
实习单位评语
2014/04/26 职场文书
《猴子种果树》教学反思
2014/04/26 职场文书
篮球比赛口号
2014/06/10 职场文书
学校创先争优活动总结
2014/08/28 职场文书
2014年物资管理工作总结
2014/12/02 职场文书
毕业生评语大全
2015/01/04 职场文书
2015年化验员工作总结
2015/04/10 职场文书
2015年检验员工作总结范文
2015/04/30 职场文书
Java基础之线程锁相关知识总结
2021/06/30 Java/Android
十大最强岩石系宝可梦,怪颚龙实力最强,第七破坏力很强
2022/03/18 日漫