图片轮换效果实现代码(点击按钮停止执行)
更新时间：2013年04月12日 17:16:53 作者：
在这个实例中需要注意的是，要把images文件夹下图片的命名设置为有顺序的，1、2、3..才可以，感兴趣的朋友可以参考下
在这个小程序中，需要把images文件夹下图片的命名设置为有顺序的，1、2、3……
<script type="text/javascript">
var imgnumb = 1;
function imgfor() {
imgnumb++;
document.getElementById('img1').setAttribute('src', 'images/' + imgnumb + '.jpg');
if (imgnumb == 5) { //共5张图片
imgnumb = 0;
}
}
var clearid;
function clearfun() {
clearInterval(clearid);
}
clearid=setInterval(imgfor, 500);
</script>
</head>
<body>
<img alt="" id="img1" class="style1" src="images/1.jpg" width="500px" height="500px" />
<input type="button" value="结束执行" onclick="clearfun();" />
</body>
var imgnumb = 1;
function imgfor() {
imgnumb++;
document.getElementById('img1').setAttribute('src', 'images/' + imgnumb + '.jpg');
if (imgnumb == 5) {
imgnumb = 0;
}
}
var clearid;
function clearfun() {
clearInterval(clearid);
}
clearid=setInterval(imgfor, 500);
</script>
</head>
<body>
<img alt="" id="img1" class="style1" src="images/1.jpg" width="500px" height="500px" />
<input type="button" value="结束执行" onclick="clearfun();" />
</body>
复制代码 代码如下:
<script type="text/javascript">
var imgnumb = 1;
function imgfor() {
imgnumb++;
document.getElementById('img1').setAttribute('src', 'images/' + imgnumb + '.jpg');
if (imgnumb == 5) { //共5张图片
imgnumb = 0;
}
}
var clearid;
function clearfun() {
clearInterval(clearid);
}
clearid=setInterval(imgfor, 500);
</script>
</head>
<body>
<img alt="" id="img1" class="style1" src="images/1.jpg" width="500px" height="500px" />
<input type="button" value="结束执行" onclick="clearfun();" />
</body>
var imgnumb = 1;
function imgfor() {
imgnumb++;
document.getElementById('img1').setAttribute('src', 'images/' + imgnumb + '.jpg');
if (imgnumb == 5) {
imgnumb = 0;
}
}
var clearid;
function clearfun() {
clearInterval(clearid);
}
clearid=setInterval(imgfor, 500);
</script>
</head>
<body>
<img alt="" id="img1" class="style1" src="images/1.jpg" width="500px" height="500px" />
<input type="button" value="结束执行" onclick="clearfun();" />
</body>
相关文章
此实例，直接粘贴代码即可运行，当然图片的路径不要忘记改了。2014-06-06
用于在现有窗口上加载蒙板，在蒙板内在嵌入其他页面内容2010-11-11
在本篇文章中小编给各位整理的是关于js new Date()测试的相关实例代码，有需要的朋友们参考学习下。2019-10-10
这篇文章主要详细介绍了babel是如何将class语法糖转换为es5的语法,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-02-02
往往我们需要在 JS 中动态添加事件，这就涉及到浏览器兼容性问题了，以下谈及的几种方法，我们也常常混合使用。2008-11-11
这篇文章主要介绍了JS前端知识点总结之内置对象，日期对象和定时器相关操作,简单总结分析了JS内置对象，日期对象和定时器相关对象方法及使用技巧,需要的朋友可以参考下2019-07-07
这篇文章主要介绍了微信小程序 生成携带参数的二维码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值2019-10-10
这篇文章主要为大家详细介绍了原生JS实现无缝轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
今天小编就为大家分享一篇解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
给大家详细讲解一下如何通过javascript写出异步图片上传，并且把实例代码给大家分享了下，有兴趣的读者们测试一下吧。2017-12-12
最新评论