JS實現(xiàn)圖片切換效果
更新時間：2021年04月29日 14:47:15 作者：wxk_前端開發(fā)
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實現(xiàn)圖片切換效果
，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JS實現(xiàn)圖片切換效果的具體代碼，供大家參考，具體內(nèi)容如下
<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;//圖片名稱編號 默認(rèn)顯示第一張
var timer;
var isTrue=false;//標(biāo)識是否已經(jīng)啟動了一個定時器 false未啟動
//點擊事件
document.getElementById('btn1').onclick=function(){
if(isTrue){
return;//不再啟動新的定時器
}
timer=setInterval(function(){
//當(dāng)?shù)竭_(dá)之最后一張圖片時讓圖片的編號返回到第一張
if (i==3) {
i=0;
}
i++;
pic.src='images/'+i+'.jpg';
},1000);
isTrue=true;//把定時器改為啟動狀態(tài)
};
document.getElementById('btn2').onclick=function(){
clearInterval(timer);
isTrue=false;//定時器恢復(fù)為為啟動狀態(tài)
};
</script>
</body>
實現(xiàn)效果如下：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Intl?是一個全局對象，它的主要用途就是展示國際化信息，可以將字符串，數(shù)字和日期和時間轉(zhuǎn)換為指定地區(qū)的格式。這篇文章就來和大家聊聊如何利用Intl解決前端日期和時間的格式化吧2023-03-03
這篇文章給大家介紹了如何使用js實現(xiàn)高精度加減乘除模板,文章通過代碼示例介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,感興趣的小伙伴可以自己動手嘗試一下2023-10-10
Bootstrap中的Dropdown下拉菜單更改為懸停(hover)觸發(fā)
在使用bootstrap制作響應(yīng)式導(dǎo)航條時，dropdown組件用的比較多，dropdown默認(rèn)鼠標(biāo)左鍵單擊才展開，如果使用鼠標(biāo)放上去（hover）就展開則會省去點擊時間，這樣能提高效率，下面小編給大家解答下實現(xiàn)思路2016-08-08
我們在用javascript創(chuàng)建一個遮蓋層(div)后，如果點擊關(guān)閉用到了2009-06-06
js 創(chuàng)建對象的多種方式與優(yōu)缺點小結(jié)
這篇文章主要介紹了js 創(chuàng)建對象的多種方式與優(yōu)缺點，幫助大家更好的理解和學(xué)習(xí)使用JavaScript，感興趣的朋友可以了解下2021-03-03
這篇文章主要給大家介紹了關(guān)于blob文件流前端顯示pdf的三種方法,困擾我一個晚上的問題,終于解決了,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下2024-04-04
排序算法的javascript實現(xiàn)與講解(99js手記)
這篇文章主要介紹了排序算法的javascript實現(xiàn)與講解,需要的朋友可以參考下2014-09-09
Echarts折線圖如何根據(jù)容器寬度自適應(yīng)展示
我們使用vue做項目的時候,常常需要做到echarts圖表的自適應(yīng),一般是根據(jù)頁面的寬度做對應(yīng)的適應(yīng),下面這篇文章主要給大家介紹了關(guān)于Echarts折線圖如何根據(jù)容器寬度自適應(yīng)展示的相關(guān)資料,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了11種ASP連接數(shù)據(jù)庫的方法，需要的朋友可以參考下2015-09-09
Js瀏覽器全屏代碼（模仿按F11），需要的朋友可以參考下。2011-01-01