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