JavaScript實現切換多張圖片

Posted on by

本文實例為大傢分享瞭JavaScript實現切換多張圖片的具體代碼，供大傢參考，具體內容如下

循環切換圖片
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];
   
   //創建一個數組保存所有圖片的路徑
   //這裡設置圖片文件的路徑
   var imgArr = ["./images/banner1.png", "./images/banner2.png", "./images/banner3.png", "./images/banner4.png", "./images/banner5.png"];
   //設置圖片初始值
   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;//循環(第一張-》最後一張)
    }
    img.src = imgArr[index];
    info.innerHTML = "一共" + imgArr.length + "張," + "當前為第" + (index + 1) + "張";
   };
   //下一張
   document.getElementById("next").onclick = function () {
    index++;
    //判斷index是否大於數組的長度-1(數組的最大下標)
    if (index > imgArr.length - 1) {
     index = 0;//循環(最後一張-》第一張)
    }
    img.src = imgArr[index];
    info.innerHTML = "一共" + imgArr.length + "張," + "當前為第" + (index + 1) + "張";
   }
  };

</script>

預覽效果：

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：