快捷導(dǎo)航

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

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

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

本文實(shí)例為大家分享了JavaScript實(shí)現(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標(biāo)簽
   var img = document.getElementsByTagName("img")[0];
   
   //創(chuàng)建一個(gè)數(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標(biāo)簽
   var info = document.getElementById("info");
   info.innerHTML = "一共" + imgArr.length + "張," + "當(dāng)前為第" + (index + 1) + "張";

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

</script>

預(yù)覽效果：

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

您可能感興趣的文章:

相關(guān)文章

bootstrap模態(tài)框消失問題的解決方法
這篇文章主要為大家詳細(xì)整理了bootstrap模態(tài)框消失不消失各種問題的解決方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
多個(gè)上傳文件用js驗(yàn)證文件的格式和大小的方法(推薦)
下面小編就為大家?guī)硪黄鄠€(gè)上傳文件用js驗(yàn)證文件的格式和大小的方法(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-03-03
JS立即執(zhí)行函數(shù)功能與用法分析
這篇文章主要介紹了JS立即執(zhí)行函數(shù)功能與用法,結(jié)合實(shí)例形式分析了立即執(zhí)行函數(shù)的相關(guān)概念、定義、使用方法及操作注意事項(xiàng),需要的朋友可以參考下
2019-01-01
javascript格式化json顯示實(shí)例分析
這篇文章主要介紹了javascript格式化json顯示,實(shí)例分析了javascript操作json格式化的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-04-04
JS實(shí)現(xiàn)的簡單輪播圖運(yùn)動(dòng)效果示例
這篇文章主要介紹了JS實(shí)現(xiàn)的簡單輪播圖運(yùn)動(dòng)效果,結(jié)合完整實(shí)例形式分析了javascript基于定時(shí)器動(dòng)態(tài)修改頁面元素屬性的相關(guān)操作技巧,需要的朋友可以參考下
2016-12-12
JS中prototype的用法實(shí)例分析
這篇文章主要介紹了JS中prototype的用法,實(shí)例分析了JS中prototype的常見使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-03-03
JavaScript實(shí)現(xiàn)煙花特效(面向?qū)ο?
這篇文章主要為大家詳細(xì)介紹了JavaScript使用面向?qū)ο缶幊虒?shí)現(xiàn)煙花特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-08-08
JS關(guān)于?replace?取值、替換第幾個(gè)匹配項(xiàng)問題小結(jié)
這篇文章主要介紹了JS關(guān)于replace取值、替換第幾個(gè)匹配項(xiàng),本文針對字符串的替換、截取知識(shí)點(diǎn)做詳細(xì)介紹，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2023-05-05
利用uni-app生成微信小程序的踩坑記錄
uni-app是一個(gè)使用 Vue.js 開發(fā)所有前端應(yīng)用的框架,開發(fā)者編寫一套代碼,可發(fā)布到iOS、Android、H5、以及各種小程序（微信/支付寶/百度/頭條/QQ/釘釘）等多個(gè)平臺(tái),這篇文章主要給大家介紹了關(guān)于利用uni-app生成微信小程序的踩坑記錄,需要的朋友可以參考下
2022-04-04
js學(xué)習(xí)總結(jié)之dom2級事件基礎(chǔ)知識(shí)詳解
這篇文章主要為大家詳細(xì)介紹了js學(xué)習(xí)總結(jié)之dom2級事件基礎(chǔ)知識(shí)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-07-07