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 相关文章推荐
表单填写时用回车代替TAB的实现方法
Oct 09 Javascript
javascript innerHTML、outerHTML、innerText、outerText的区别
Nov 24 Javascript
一个简单的js动画效果代码
Jul 20 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
Nov 30 Javascript
javascript向flash swf文件传递参数值注意细节
Dec 11 Javascript
Javascript异步编程模型Promise模式详细介绍
May 08 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
Nov 24 Javascript
BootStrap Fileinput的使用教程
Dec 30 Javascript
AjaxUpLoad.js实现文件上传
Mar 05 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
用vuex写了一个购物车H5页面的示例代码
Dec 04 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
Jul 22 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 文件类型判断代码
2009/03/13 PHP
详解PHP使用日期时间处理器Carbon人性化显示时间
2017/08/10 PHP
PHP使Laravel为JSON REST API返回自定义错误的问题
2018/10/16 PHP
node.js chat程序如何实现Ajax long-polling长链接刷新模式
2012/03/13 Javascript
jquery.validate的使用说明介绍
2013/11/12 Javascript
jquery中的on方法使用介绍
2013/12/29 Javascript
javascript简单性能问题及学习笔记
2014/02/04 Javascript
JavaScript中for循环的使用详解
2015/06/03 Javascript
node.js+express制作网页计算器
2016/01/17 Javascript
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
2017/09/28 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
2017/11/22 Javascript
详解vue-cli官方脚手架配置
2018/07/20 Javascript
微信小程序中上传图片并进行压缩的实现代码
2018/08/28 Javascript
electron制作仿制qq聊天界面的示例代码
2018/11/26 Javascript
总结用Pdb库调试Python的方式及常用的命令
2016/08/18 Python
python 爬虫出现403禁止访问错误详解
2017/03/11 Python
浅谈python import引入不同路径下的模块
2017/07/11 Python
pycharm远程调试openstack的图文教程
2017/11/21 Python
Python求出0~100以内的所有素数
2018/01/23 Python
Python中协程用法代码详解
2018/02/10 Python
利用python打开摄像头及颜色检测方法
2018/08/03 Python
django celery redis使用具体实践
2019/04/08 Python
对Python中画图时候的线类型详解
2019/07/07 Python
pytorch使用tensorboardX进行loss可视化实例
2020/02/24 Python
python绘图pyecharts+pandas的使用详解
2020/12/13 Python
深入理解css属性的选择对动画性能的影响
2016/04/20 HTML / CSS
施华洛世奇英国官网:SWAROVSKI英国
2017/03/13 全球购物
迪卡侬比利时官网:Decathlon比利时
2019/12/28 全球购物
园长自我鉴定
2013/10/06 职场文书
自荐信不宜过于夸大
2013/11/06 职场文书
公司清洁工岗位职责
2013/12/14 职场文书
运动会解说词50字
2014/01/18 职场文书
员工考核管理制度
2014/02/02 职场文书
小区门卫岗位职责范本
2014/08/24 职场文书
党的群众路线教育实践活动先进个人材料
2014/12/24 职场文书
JUnit5常用注解的使用
2021/07/02 Java/Android