快捷導(dǎo)航

JavaScript實現(xiàn)切換多張圖片

更新時間：2021年01月27日 11:13:55 作者：是M

這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)切換多張圖片，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript實現(xiàn)切換多張圖片的具體代碼，供大家參考，具體內(nèi)容如下

循環(huán)切換圖片
HTML+CSS+JavaScript

html部分

<body>
 <div class="outer">
  <p id="info"></p>
  <img src="./images/banner1.png" alt="圖片" title="圖片">

  <button id='prev'>上一張</button>
  <button id='next'>下一張</button>
 </div>

</body>

css部分

<style>
  * {
   padding: 0;
   margin: 0;
  }

  .outer {
   width: 1000px;
   background-color: #bfa;
   margin: 50px auto;
   text-align: center;
   padding: 10px;
  }

  img {
   width: 900px;
   display: block;
   margin: 0 auto;
  }

  button {
   margin: 5px;
  }
</style>

JavaScript部分

這里用到了JavaScript的DOM對象

<script>
  // 加載文檔
  window.onload = function () {
   //獲取img標簽
   var img = document.getElementsByTagName("img")[0];
   
   //創(chuàng)建一個數(shù)組保存所有圖片的路徑
   //這里設(shè)置圖片文件的路徑
   var imgArr = ["./images/banner1.png", "./images/banner2.png", "./images/banner3.png", "./images/banner4.png", "./images/banner5.png"];
   //設(shè)置圖片初始值
   var index = 0;
   //獲取id為info的p標簽
   var info = document.getElementById("info");
   info.innerHTML = "一共" + imgArr.length + "張," + "當前為第" + (index + 1) + "張";

   //綁定兩個按鈕
   //上一張
   document.getElementById("prev").onclick = function () {
    index--;
    //判斷index是否小于0
    if (index < 0) {
     index = imgArr.length - 1;//循環(huán)(第一張-》最后一張)
    }
    img.src = imgArr[index];
    info.innerHTML = "一共" + imgArr.length + "張," + "當前為第" + (index + 1) + "張";
   };
   //下一張
   document.getElementById("next").onclick = function () {
    index++;
    //判斷index是否大于數(shù)組的長度-1(數(shù)組的最大下標)
    if (index > imgArr.length - 1) {
     index = 0;//循環(huán)(最后一張-》第一張)
    }
    img.src = imgArr[index];
    info.innerHTML = "一共" + imgArr.length + "張," + "當前為第" + (index + 1) + "張";
   }
  };

</script>

預(yù)覽效果：