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 相关文章推荐
xml 与javascript结合的问题解决方法
Mar 24 Javascript
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
Feb 18 Javascript
jQuery 自动增长的文本输入框实现代码
Apr 02 Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
Sep 02 Javascript
解决jquery1.9不支持browser对象的问题
Nov 13 Javascript
JavaScript必看小技巧(必看)
Jun 07 Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
Dec 06 Javascript
JavaScript Ajax实现异步通信
Dec 14 Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
Jan 04 Javascript
vue仿element实现分页器效果
Sep 13 Javascript
JS监听组合按键思路及实现过程
Apr 17 Javascript
vue中defineProperty和Proxy的区别详解
Nov 30 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缓存设计实现代码
2011/09/30 PHP
PHP随机获取未被微信屏蔽的域名(微信域名检测)
2017/03/19 PHP
PHP array_shift()用法实例分析
2019/01/07 PHP
Laravel5.1 框架控制器基础用法实例分析
2020/01/04 PHP
JavaScript 产生不重复的随机数三种实现思路
2012/12/13 Javascript
jquery 缓存问题的几个解决方法
2013/11/11 Javascript
js语法学习之判断一个对象是否为数组
2014/05/13 Javascript
JS遍历对象属性的方法示例
2017/01/10 Javascript
jQuery实现简单弹窗遮罩效果
2017/02/27 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
2017/03/01 Javascript
JavaScript实现移动端轮播效果
2017/06/06 Javascript
vue.js框架实现表单排序和分页效果
2017/08/09 Javascript
Vue组件之极简的地址选择器的实现
2018/05/31 Javascript
使用vue实现多规格选择实例(SKU)
2019/08/23 Javascript
Vue中使用matomo进行访问流量统计的实现
2019/11/05 Javascript
Vue实现页面添加水印功能
2019/11/09 Javascript
vue基于better-scroll仿京东分类列表
2020/06/30 Javascript
可拖拽组件slider.js使用方法详解
2020/12/04 Javascript
[02:52]2014DOTA2西雅图国际邀请赛 CIS战队巡礼
2014/07/07 DOTA
Python基础教程之异常详解
2019/01/10 Python
python调用c++传递数组的实例
2019/02/13 Python
详解python算法之冒泡排序
2019/03/05 Python
Django框架会话技术实例分析【Cookie与Session】
2019/05/24 Python
Python 内置变量和函数的查看及说明介绍
2019/12/25 Python
python读取与处理netcdf数据方式
2020/02/14 Python
如何使用 Flask 做一个评论系统
2020/11/27 Python
html5使用canvas画一条线
2014/12/15 HTML / CSS
澳大利亚免息网上购物:Shop Zero
2016/09/17 全球购物
旅游项目开发策划书
2014/01/18 职场文书
开会迟到检讨书
2014/02/03 职场文书
公共艺术专业自荐信
2014/09/01 职场文书
检察机关个人对照检查材料
2014/09/15 职场文书
施工单位工程部经理岗位职责
2015/04/09 职场文书
开国大典观后感
2015/06/04 职场文书
周一问候语大全
2015/11/10 职场文书
《钢铁是怎样炼成的》高中读后感
2019/08/07 职场文书