本文實例為大家分享了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>實現效果如下：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
