溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例為大家分享了JS實現圖片切換效果的具體代碼，供大家參考，具體內容如下
<body>
<button id="btn1">ON</button>
<button id="btn2">OFF</button><br>
<img src="images/0.jpg" 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>
實現效果如下：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
