JS对img进行操作(换图片/切图/轮换/停止)
更新时间：2013年04月17日 11:52:13 作者：
JS对img进行操作包括:换图片/切图/轮换/停止轮换等等，在本文将逐一实现，感兴趣的朋友可以参考下哈，希望对你学习js知识有所帮助
复制代码 代码如下:
<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>
相关文章
这篇文章主要介绍了微信公众号网页分享功能开发的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
本文主要介绍了JavaScript 计算误差的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
这篇文章主要为大家详细介绍了JS中对Cookie的具体操作，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
做一个鼠标移入移出图片事件，首先是改变分辨率的两种方法，鼠标移入图片和移出图片的分辨率不同，具体实现如下，感兴趣的朋友可以参考下2013-12-12
这篇文章主要介绍了JavaScript操作XML文件之XML读取方法,涉及javascript操作XML文件的相关技巧,需要的朋友可以参考下2015-06-06
这篇文章主要为大家详细介绍了JS原型对象和原型链，感兴趣的小伙伴们可以参考一下2016-03-03
这篇文章主要介绍了Webpack的dll功能使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
这篇文章主要介绍了JS常见创建类的方法,结合实例形式总结分析了工厂方式,构造器方式,原型方式,联合方式等常见的javascript创建类的常用技巧与相关注意事项,需要的朋友可以参考下2017-04-04
这篇文章主要介绍了JavaScript中Iterator迭代器接口和循环，迭代器是数据结构遍历的一种机制迭代器主要是提供for...of使用，更多相关内推需要的小伙伴可以参考下面文章内容2022-06-06
这篇文章主要介绍了JavaScript onclick事件使用方法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-05-05
最新评论