溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
利用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>關于利用JavaScript怎么對多張圖片進行切換問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
