啥也不说,上代码文章来源:https://www.toymoban.com/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>
/*
点击按钮切换图片
*/
// 在文档加载完毕时触发
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")
// 创建一个数组来存储图片地址
const imgArr = [
"./images/1.png",
"./images/2.png",
"./images/3.png",
"./images/4.png",
"./images/5.png"
]
// 创建一个变量记录当前图片索引
let current = 0
info.textContent = `共 ${imgArr.length} 张图片,当前时第 ${current + 1} 张`
// 当点击prev按钮时,切换上一张
prev.addEventListener("click", function () {
current--
// 检查current值是否合法
if (current < 0) {
current = imgArr.length - 1
}
// 切换图片
img.src = imgArr[current]
info.textContent = `共 ${imgArr.length} 张图片,当前时第 ${current + 1} 张`
})
// 当点击next按钮时,切换下一张
next.addEventListener("click", function () {
current++
// // 检查current值是否合法
if (current > imgArr.length - 1) {
current = 0
}
// 切换图片
img.src = imgArr[current]
info.textContent = `共 ${imgArr.length} 张图片,当前时第 ${current + 1} 张`
})
}
</script>
</head>
<body>
<div class="outer">
<div id="info">
共 n 张图片,当前时第 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>
效果:文章来源地址https://www.toymoban.com/news/detail-512561.html
到了这里,关于用JS实现点击按钮切换图片的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!