1.详细代码
<style>
div.box {
width: 500px;
margin: 50px auto;
text-align: center;
background-color: bisque;
}
img {
width: 100%;
}
</style>
<script>
//页面上部设置，绑定onload
window.onload = function () {
//获取按钮标签对象
let before = document.getElementById("before");
let after = document.getElementById("after");
//封装图片路径
let imgArr = ["./th (1).jpg", "./th.jpg", "./th2.jpg"]
//设置索引变量
let index = 0;
//获取图片文字信息变量
let info = document.getElementById("info");
//设置图片页数
info.innerHTML = "当前是第1页，一共有" + imgArr.length + "页";
//绑定单击响应函数
before.onclick = function () {
//设置索引变化规律
index--;
//限制索引大小
if (index < 0) {
index = imgArr.length - 1;
}
//切换图片路径属性
document.getElementById("img").src = imgArr[index];
//设置文字信息更改
info.innerHTML = "当前是第"+(index+1)+"页，一共有" + imgArr.length + "页";
}
after.onclick = function () {
//设置索引变化规律
index++;
//限制索引大小
if (index > imgArr.length - 1) {
index = 0;
}
//DOM查询一个指定<img>元素节点，访问其中src对象,切换图片路径属性
document.getElementById("img").src = imgArr[index];
//设置文字信息更改
info.innerHTML = "当前是第"+(index+1)+"页，一共有" + imgArr.length + "页";
}
}
</script>
</head>
<body>
<div class="box">
<p id="info"></p>
<img id="img" src="./th (1).jpg" alt="">
<button id="before">上一张</button>
<button id="after">下一张</button>
</div>
</body>2.思维导图
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
