啥也不說(shuō)，上代碼文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-512561.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.outer {
margin: 100px auto;
text-align: center;
}
</style>
<script>
/*
點(diǎn)擊按鈕切換圖片
*/
// 在文檔加載完畢時(shí)觸發(fā)
window.onload = function () {
// 獲取info
const info = document.getElementById("info")
// 獲取img元素
const img = document.getElementsByTagName("img")[0]
// 獲取按鈕元素
const prev = document.getElementById("prev")
const next = document.getElementById("next")
// 創(chuàng)建一個(gè)數(shù)組來(lái)存儲(chǔ)圖片地址
const imgArr = [
"./images/1.png",
"./images/2.png",
"./images/3.png",
"./images/4.png",
"./images/5.png"
]
// 創(chuàng)建一個(gè)變量記錄當(dāng)前圖片索引
let current = 0
info.textContent = `共 ${imgArr.length} 張圖片，當(dāng)前時(shí)第 ${current + 1} 張`
// 當(dāng)點(diǎn)擊prev按鈕時(shí)，切換上一張
prev.addEventListener("click", function () {
current--
// 檢查current值是否合法
if (current < 0) {
current = imgArr.length - 1
}
// 切換圖片
img.src = imgArr[current]
info.textContent = `共 ${imgArr.length} 張圖片，當(dāng)前時(shí)第 ${current + 1} 張`
})
// 當(dāng)點(diǎn)擊next按鈕時(shí)，切換下一張
next.addEventListener("click", function () {
current++
// // 檢查current值是否合法
if (current > imgArr.length - 1) {
current = 0
}
// 切換圖片
img.src = imgArr[current]
info.textContent = `共 ${imgArr.length} 張圖片，當(dāng)前時(shí)第 ${current + 1} 張`
})
}
</script>
</head>
<body>
<div class="outer">
<div id="info">
共 n 張圖片，當(dāng)前時(shí)第 m 張
</div>
<div class="img-warpper">
<img src="./images/1.png" alt="">
</div>
<div class="btn-warpper">
<button id="prev">上一張</button>
<button id="next">下一張</button>
</div>
</div>
</body>
</html>效果：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-512561.html
到了這里，關(guān)于用JS實(shí)現(xiàn)點(diǎn)擊按鈕切換圖片的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
