快捷導(dǎo)航

JavaScript實(shí)現(xiàn)簡單的圖片切換功能(實(shí)例代碼)

更新時(shí)間：2020年04月10日 10:37:17 作者：陳太浪

這篇文章主要介紹了JavaScript實(shí)現(xiàn)簡單的圖片切換功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧

代碼如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>圖片切換</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box{
      width: 200px;
      height: 300px;
      margin: 50px auto;
      padding: 20px;
      background-color: skyblue;
      text-align: center;
    }
    img{
      width: 200px;
      height: 200px;
      margin: 20px 0;
    }
  </style>
  <script>
    // 存儲照片地址的數(shù)組
    let imgArr = ["https://images.cnblogs.com/cnblogs_com/TomHe789/1693260/o_200409051704animal1.png", "https://images.cnblogs.com/cnblogs_com/TomHe789/1693260/o_200409051711animal2.png", "https://images.cnblogs.com/cnblogs_com/TomHe789/1693260/o_200409051717animal3.png", "https://images.cnblogs.com/cnblogs_com/TomHe789/1693260/o_200409051722animal4.png", "https://images.cnblogs.com/cnblogs_com/TomHe789/1693260/o_200409051726animal5.png"];

    // 照片的索引
    let index = 0;
    window.onload = function() {
      let oP = document.getElementsByTagName("p")[0];
      oP.innerHTML = "一共有" + imgArr.length + "張照片,這是第" + (index+1) +"張";

      let oImg = document.getElementsByTagName("img")[0];
      let oPrev = document.getElementsByClassName("prev")[0];
      let oNext = document.getElementsByClassName("next")[0];

      // 點(diǎn)擊上一張響應(yīng)事件
      oPrev.onclick = function () {
        index--;
        //實(shí)現(xiàn)照片循環(huán)
        if (index < 0) {
          index = imgArr.length-1;
        }
        oP.innerHTML = "一共有" + imgArr.length + "張照片,這是第" + (index+1) +"張";
        oImg.src = imgArr[index];

      };

      // 點(diǎn)擊下一張響應(yīng)事件
      oNext.onclick = function () {
        index++;
        //實(shí)現(xiàn)照片循環(huán)
        if (index >= imgArr.length) {
          index = 0;
        }
        oP.innerHTML = "一共有" + imgArr.length + "張照片,這是第" + (index+1) +"張";
        oImg.src = imgArr[index];
      };
    };
  </script>
</head>
<body>
  <div class="box">
    <p></p>
    <img src="../../images/animal1.png" alt="">
    <button class="prev">上一張</button>
    <button class="next">下一張</button>
  </div>
</body>
</html>

最終的效果

總結(jié)

到此這篇關(guān)于JavaScript實(shí)現(xiàn)簡單的圖片切換功能(實(shí)例代碼)的文章就介紹到這了,更多相關(guān)js 圖片切換內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue的編碼技巧與規(guī)范使用詳解
這篇文章主要介紹了Vue的編碼技巧與規(guī)范使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08
如何管理Vue中的緩存頁面
這篇文章主要介紹了如何管理Vue中的緩存頁面，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下
2021-02-02
Vue學(xué)習(xí)之路之登錄注冊實(shí)例代碼
本篇文章主要介紹了Vue學(xué)習(xí)之路之登錄注冊實(shí)例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-07-07
react+vite動態(tài)導(dǎo)入報(bào)錯(cuò)@vite-ignore的問題及解決
這篇文章主要介紹了react+vite動態(tài)導(dǎo)入報(bào)錯(cuò)@vite-ignore的問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
詳解如何配置vue-cli3.0的vue.config.js
這篇文章主要介紹了詳解如何配置vue-cli3.0的vue.config.js，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-08-08
element-ui el-dialog嵌套table組件,ref問題及解決
這篇文章主要介紹了element-ui el-dialog嵌套table組件,ref問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-02-02
Vue登錄注冊并保持登錄狀態(tài)的方法
這篇文章主要介紹了Vue登錄注冊并保持登錄狀態(tài)的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-08-08
Vue中瀑布流布局與圖片加載優(yōu)化的實(shí)現(xiàn)
本文主要介紹了Vue中瀑布流布局與圖片加載優(yōu)化的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-06-06
Vue單文件組件基礎(chǔ)模板小結(jié)
本篇文章主要介紹了Vue單文件組件基礎(chǔ)模板小結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-08-08
Vue Element前端應(yīng)用開發(fā)之界面語言國際化
我們開發(fā)的系統(tǒng)，一般可以不用考慮語言國際化的問題，大多數(shù)系統(tǒng)一般是給本國人使用的，而且直接使用中文開發(fā)界面會更加迅速一些，不過框架最好能夠支持國際化的處理，以便在需要的時(shí)候，可以花點(diǎn)時(shí)間來實(shí)現(xiàn)多語言切換的處理，使系統(tǒng)具有更廣泛的受眾用戶。
2021-05-05