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 相关文章推荐
一个非常全面的javascript URL解析函数和分段URL解析方法
Apr 12 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
Mar 09 Javascript
简单的jQuery banner图片轮播实例代码
Mar 04 Javascript
AngularJS中实现动画效果的方法
Jul 28 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
Oct 30 Javascript
你真的了解BOM中的history对象吗
Feb 13 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
Aug 16 Javascript
详解vue2.0 资源文件assets和static的区别
Nov 27 Javascript
vue中对象数组去重的实现
Feb 06 Javascript
vue2.x 对象劫持的原理实现
Apr 19 Javascript
vue+animation实现翻页动画
Jun 29 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
Aug 27 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
虫族 ZERG 概述
2020/03/14 星际争霸
PHP计算2点经纬度之间的距离代码
2013/08/12 PHP
php上传图片之时间戳命名(保存路径)
2014/08/15 PHP
php中二维数组排序问题方法详解
2015/08/28 PHP
必须收藏的php实用代码片段
2016/02/02 PHP
php车辆违章查询数据示例
2016/10/14 PHP
Laravel中服务提供者和门面模式的入门介绍
2017/11/06 PHP
laravel中短信发送验证码的实现方法
2018/04/25 PHP
PHP实现批量修改文件名的方法示例
2019/09/18 PHP
javascript 关闭IE6、IE7
2009/06/01 Javascript
niceTitle 基于jquery的超链接提示插件
2010/05/31 Javascript
有关于JS辅助函数inherit()的问题
2013/04/07 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
2015/03/26 Javascript
javascript如何实现360度全景照片问题汇总
2016/04/04 Javascript
canvas学习之API整理笔记(二)
2016/12/29 Javascript
vue实现百度搜索下拉提示功能实例
2017/06/14 Javascript
Angular.JS中select下拉框设置value的方法
2017/06/20 Javascript
用p5.js制作烟花特效的示例代码
2018/03/21 Javascript
js动态引入的四种方法
2018/05/05 Javascript
基于webpack4搭建的react项目框架的方法
2018/06/30 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
2018/11/02 Javascript
JS遍历树层级关系实现原理解析
2020/08/31 Javascript
Vue3.0的优化总结
2020/10/16 Javascript
python基于pygame实现响应游戏中事件的方法(附源码)
2015/11/11 Python
删除python pandas.DataFrame 的多重index实例
2018/06/08 Python
PyTorch基本数据类型(一)
2019/05/22 Python
Python+numpy实现矩阵的行列扩展方式
2019/11/29 Python
python实现将字符串中的数字提取出来然后求和
2020/04/02 Python
Python利用pip安装tar.gz格式的离线资源包
2020/09/14 Python
中国高端家电购物商城:顺电
2018/03/04 全球购物
巴西Mr. Cat在线商店:购买包包和鞋子
2019/09/08 全球购物
如何开启linux的ssh服务
2015/02/14 面试题
国庆宣传标语
2014/06/30 职场文书
2014年团员学习十八大思想汇报
2014/09/13 职场文书
大学军训决心书
2015/02/05 职场文书
一篇带你入门Java垃圾回收器
2021/06/16 Java/Android