JS实现图片切换效果
程序员文章站
2022-06-06 09:28:25
本文实例为大家分享了js实现图片切换效果的具体代码,供大家参考,具体内容如下
本文实例为大家分享了js实现图片切换效果的具体代码,供大家参考,具体内容如下
<body> <button id="btn1">on</button> <button id="btn2">off</button><br> <img src="images/0.jpg" alt="" id="pic"> <script type="text/javascript"> //获得图片对象 var pic=document.getelementbyid('pic'); var i=0;//图片名称编号 默认显示第一张 var timer; var istrue=false;//标识是否已经启动了一个定时器 false未启动 //点击事件 document.getelementbyid('btn1').onclick=function(){ if(istrue){ return;//不再启动新的定时器 } timer=setinterval(function(){ //当到达之最后一张图片时让图片的编号返回到第一张 if (i==3) { i=0; } i++; pic.src='images/'+i+'.jpg'; },1000); istrue=true;//把定时器改为启动状态 }; document.getelementbyid('btn2').onclick=function(){ clearinterval(timer); istrue=false;//定时器恢复为为启动状态 }; </script> </body>
实现效果如下:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇: layDate插件设置开始和结束时间