JS實(shí)現(xiàn)圖片切換效果
更新時(shí)間：2021年04月29日 14:47:15 作者：wxk_前端開發(fā)
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)圖片切換效果
，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JS實(shí)現(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)啟動(dòng)了一個(gè)定時(shí)器 false未啟動(dòng)
//點(diǎn)擊事件
document.getElementById('btn1').onclick=function(){
if(isTrue){
return;//不再啟動(dòng)新的定時(shí)器
}
timer=setInterval(function(){
//當(dāng)?shù)竭_(dá)之最后一張圖片時(shí)讓圖片的編號返回到第一張
if (i==3) {
i=0;
}
i++;
pic.src='images/'+i+'.jpg';
},1000);
isTrue=true;//把定時(shí)器改為啟動(dòng)狀態(tài)
};
document.getElementById('btn2').onclick=function(){
clearInterval(timer);
isTrue=false;//定時(shí)器恢復(fù)為為啟動(dòng)狀態(tài)
};
</script>
</body>
實(shí)現(xiàn)效果如下：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 最簡單的js圖片切換效果實(shí)現(xiàn)代碼
- 用html+css+js實(shí)現(xiàn)的一個(gè)簡單的圖片切換特效
- 純js實(shí)現(xiàn)背景圖片切換效果代碼
- 簡單的實(shí)現(xiàn)點(diǎn)擊箭頭圖片切換的js代碼
- css圖片切換效果代碼[不用js]
- 純js無flash仿搜狐女人頻道FLASH圖片切換效果代碼
- javascript實(shí)現(xiàn)圖片切換的幻燈片效果源代碼
- JavaScript實(shí)現(xiàn)圖片切換效果
- js鼠標(biāo)點(diǎn)擊圖片切換效果代碼分享
- javascript實(shí)現(xiàn)點(diǎn)擊圖片切換功能
相關(guān)文章
js預(yù)載入和JavaScript Image()對象使用介紹
為了解決在canvas使用drawImage()時(shí),遇到img對象來不及加載的問題; 我最終在html文檔加載中,使用了下面"數(shù)組加載圖像的辦法”解決,如果有其他方法,請給予指點(diǎn)!2011-08-08
在本文中，我將解釋如何使用 setTimeout()，包括如何使用它來制作一個(gè)睡眠函數(shù)，使JavaScript暫停執(zhí)行并在連續(xù)的代碼行之間等待。2021-04-04
音樂播放用的的幾個(gè)函數(shù)...2006-09-09
今天通過一個(gè)案例給大家分享微信小程序連續(xù)簽到7天積分獲得功能，通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2020-08-08
本篇文章要是對JS中的OffsetParent屬性進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所 幫助2014-01-01
js實(shí)現(xiàn)動(dòng)態(tài)改變字體大小代碼
本文為大家介紹下使用js如何實(shí)現(xiàn)動(dòng)態(tài)改變字體大小，感興趣的額朋友不要錯(cuò)過2014-01-01
這篇文章主要介紹了JavaScript字典與集合詳解，集合是由一組無序且不重復(fù)的元素構(gòu)成。我們可以將集合看成一種特殊的數(shù)組，它的特殊之處就是無序且不重復(fù)，這也就意味著我們不能通過下標(biāo)的方式進(jìn)行訪問，而且集合中不會出現(xiàn)重復(fù)的元素2022-07-07
模板淘寶首頁的分類列表效果，17173的游戲分類效果也不錯(cuò)。2009-04-04
前端 javascript 實(shí)現(xiàn)文件下載的示例
這篇文章主要介紹了前端 javascript 實(shí)現(xiàn)文件下載的示例2020-11-11
JavaScript 讀URL參數(shù)增強(qiáng)改進(jìn)版版
網(wǎng)上有不少JavaScript 讀 URL 參數(shù)的函數(shù)，但沒考慮到 URL 中帶 # 符的情況，我的可以處理這種情況，并使用了點(diǎn)對象寫法，優(yōu)化了些性能。2008-10-10