js实现动态轮播图功能的方法教程
程序员文章站
2022-06-29 08:23:58
写在前面：
在页面每隔一段时间实现一个动态功能时可以使用定时器，settimeout()和setinterval()方法
注意事项：
1.定时器有返回值，返回的是定时器的编号
2.多次调用...
写在前面：
在页面每隔一段时间实现一个动态功能时可以使用定时器，settimeout()和setinterval()方法
注意事项：
1.定时器有返回值，返回的是定时器的编号 2.多次调用定时器可以产生多个定时器，产生的页面效果是循环的功能越来越快 3.清除定时器方法cleartimeout()和clearinterval()只能清楚对应定时器产生的最后一个编号（如果多次调用之后使用清除定时器方法只能清除最后一个定时器， 之前的定时器仍然可以继续运行。所以需要提前调用一次清除器，防止重复调用产生定时器。）
主要代码：
<body>
<button id="btn-start">start</button><button id="btn-stop">stop</button><br>
<img src="images/1.png" alt="" id="pic">
<script type="text/javascript">
/*
页面上有两个按钮 “开始” “停止”，一个图片
1.当点击“开始”按钮时，图片每个两秒切换一次（共有四张图片，循环切换）
2.点击停止时，停止切换
*/
var btn1=document.getelementbyid('btn-start');
var btn2=document.getelementbyid('btn-stop');
var pic=document.getelementbyid('pic');
var index=1;//图片名称编号 默认显示第一张
var timer;
//开始
btn1.onclick=function(){
clearinterval(timer);//清除上一个定时器
timer=setinterval(function(){
index++;
//最后一张
if(index==5){
index=1;
}
pic.src='images/'+index+'.png';
},1000);
};
//结束
btn2.onclick=function(){
clearinterval(timer);
};
</body>
写在最后：
当两个函数需要同一个变量时需要提前定义为全局变量，如果只在一个函数中未声明直接赋值然后利用提升为全局变量的话容易出错，不建议使用。
上一篇： sass基础知识小结
下一篇： 冬季根治冻疮九偏方 香蕉皮治冻疮非常有效