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 如何实现对数据库的增删改查
Nov 23 Javascript
JavaScript function 的 length 属性使用介绍
Sep 15 Javascript
dreamweaver 8实现Jquery自动提示
Dec 04 Javascript
BootstrapValidator不触发校验的实现代码
Sep 28 Javascript
jQuery.parseHTML() 函数详解
Jan 09 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
Jan 20 Javascript
浅谈React中的元素、组件、实例和节点
Feb 27 Javascript
使用微信小程序开发弹出框应用实例详解
Oct 18 Javascript
详解vuex的简单todolist例子
Jul 14 Javascript
在vue+element ui框架里实现lodash的debounce防抖
Nov 13 Javascript
详解Vue之计算属性
Jun 20 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 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可应用于面包屑导航的迭代寻找家谱树实现方法
2015/02/02 PHP
php UNIX时间戳用法详解
2017/02/16 PHP
YII框架学习笔记之命名空间、操作响应与视图操作示例
2019/04/30 PHP
jquery 弹出层实现代码
2009/10/30 Javascript
JS连连看源码完美注释版(推荐)
2013/12/09 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
2014/10/10 Javascript
jQuery中get()方法用法实例
2014/12/27 Javascript
1秒50万字!js实现关键词匹配
2016/08/01 Javascript
node.js的exports、module.exports与ES6的export、export default深入详解
2017/10/26 Javascript
JavaScript生成简单等差数列
2017/11/28 Javascript
vue中node_modules中第三方模块的修改使用详解
2019/05/31 Javascript
vue组件添加事件@click.native操作
2020/10/30 Javascript
vue实现滚动鼠标滚轮切换页面
2020/12/13 Vue.js
原生JS实现京东查看商品点击放大
2020/12/21 Javascript
Python的Django框架中模板碎片缓存简介
2015/07/24 Python
Python 调用 Outlook 发送邮件过程解析
2019/08/08 Python
在python Numpy中求向量和矩阵的范数实例
2019/08/26 Python
Django之模板层的实现代码
2019/09/09 Python
Python合并2个字典成1个新字典的方法(9种)
2019/12/19 Python
Python几种常见算法汇总
2020/06/02 Python
用Python开发app后端有优势吗
2020/06/29 Python
python七种方法判断字符串是否包含子串
2020/08/18 Python
使用python爬取抖音app视频的实例代码
2020/12/01 Python
Python 生成短8位唯一id实战教程
2021/01/13 Python
CSS3用@font-face实现自定义英文字体
2013/09/23 HTML / CSS
英国花园、DIY、电器和家居用品商店:Robert Dyas
2019/03/18 全球购物
化学学院毕业生自荐信范文
2013/12/17 职场文书
2014年秋季开学演讲稿
2014/05/24 职场文书
文明礼仪标语
2014/06/13 职场文书
学生未请假就回家检讨书
2014/09/22 职场文书
求职意向书范本
2015/05/11 职场文书
电影焦裕禄观后感
2015/06/09 职场文书
污染环境建议书
2015/09/14 职场文书
公文写作指导之倡议书!
2019/07/03 职场文书
导游词之京东大峡谷旅游区
2019/10/29 职场文书
MySQL 视图(View)原理解析
2021/05/19 MySQL