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">
    //獲得圖片對(duì)象
    var pic=document.getElementById('pic');
    var i=0;//圖片名稱編號(hào) 默認(rèn)顯示第一張
    var timer;
    var isTrue=false;//標(biāo)識(shí)是否已經(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í)讓圖片的編號(hào)返回到第一張
           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)效果如下：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

js預(yù)載入和JavaScript Image()對(duì)象使用介紹
為了解決在canvas使用drawImage()時(shí),遇到img對(duì)象來不及加載的問題; 我最終在html文檔加載中,使用了下面"數(shù)組加載圖像的辦法”解決,如果有其他方法,請(qǐng)給予指點(diǎn)!
2011-08-08
如何使JavaScript休眠或等待
在本文中，我將解釋如何使用 setTimeout()，包括如何使用它來制作一個(gè)睡眠函數(shù)，使JavaScript暫停執(zhí)行并在連續(xù)的代碼行之間等待。
2021-04-04
音樂播放用的的幾個(gè)函數(shù)
音樂播放用的的幾個(gè)函數(shù)...
2006-09-09
微信小程序連續(xù)簽到7天積分獲得功能的示例代碼
今天通過一個(gè)案例給大家分享微信小程序連續(xù)簽到7天積分獲得功能，通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考價(jià)值，感興趣的朋友一起學(xué)習(xí)吧
2020-08-08
JS OffsetParent屬性深入解析
本篇文章要是對(duì)JS中的OffsetParent屬性進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2014-01-01
js實(shí)現(xiàn)動(dòng)態(tài)改變字體大小代碼
本文為大家介紹下使用js如何實(shí)現(xiàn)動(dòng)態(tài)改變字體大小，感興趣的額朋友不要錯(cuò)過
2014-01-01
JavaScript字典與集合詳解
這篇文章主要介紹了JavaScript字典與集合詳解，集合是由一組無序且不重復(fù)的元素構(gòu)成。我們可以將集合看成一種特殊的數(shù)組，它的特殊之處就是無序且不重復(fù)，這也就意味著我們不能通過下標(biāo)的方式進(jìn)行訪問，而且集合中不會(huì)出現(xiàn)重復(fù)的元素
2022-07-07
仿淘寶首頁分類列表效果實(shí)現(xiàn)代碼
模板淘寶首頁的分類列表效果，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)對(duì)象寫法，優(yōu)化了些性能。
2008-10-10