编程 Javascript

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 相关文章推荐

神奇的代码通杀各种网站-可随意修改复制页面内容

Jul 17 Javascript

如何使用JS获取IE上传文件路径(IE7,8)

Jul 08 Javascript

Jquery响应回车键直接提交表单操作代码

Jul 25 Javascript

超棒的响应式布局jQuery插件Freetile.js

Nov 17 Javascript

在Javascript中处理数组之toSource()方法的使用

Jun 09 Javascript

jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】

Sep 21 Javascript

ReactNative-JS 调用原生方法实例代码

Oct 08 Javascript

JS实现select选中option触发事件操作示例

Jul 13 Javascript

详解Puppeteer前端自动化测试实践

Feb 21 Javascript

详解Vue+Element的动态表单，动态表格（后端发送配置，前端动态生成）

Apr 20 Javascript

javaScript把其它类型转换为Number类型

Oct 13 Javascript

JS实现水平移动与垂直移动动画

Dec 19 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