原生js实现相册效果
实现效果：
1、显示第一张时，上一张按钮不可点击，其他时候均可点击；
2、显示最后一张时，下一张按钮不可点击，其他时候均可点击；
3、点击上下张切换，分别显示不同的图片
实现思路
1、设置变量currentPos表示当前图片为第几张；
2、通过判断图片位置，设置btn.disabled = false，达到不可点击效果；
3、图片命名方式与currentPos有关，通过currentPos动态设置img.src加载对应的图片；
实现代码
<!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>相册</title>
<style>
h1{
text-align: center;
}
/* 外边框 */
div.container {
width: 800px;
height: 700px;
margin: 0 auto;
text-align: center;
border: 1px solid orange;
border-radius: 15px;
position: relative;
}
/* 图片大小 */
div > img {
height: 600px;
}
button {
width: 200px;
height: 50px;
cursor: pointer;
}
button.left {
position: absolute;
left: 100px;
bottom: 20px;
}
button.right {
position: absolute;
right: 100px;
bottom: 20px;
}
/* 图片框，固定大小 */
#img-container {
overflow: hidden;
border-radius: 15px;
width: 750px;
height: 900px;
margin: 0px 25px 0 25px;
}
/* 底部居中 */
div#bottom {
text-align: center;
}
/* 1/10 图片位置展示 */
#info {
position: absolute;
left: 380px;
bottom: 35px;
}
</style>
</head>
<body>
<h1>相册效果</h1>
<div class="container">
<div id="img-container">
<img id="image" src="images/03/01.jpg" alt="" />
</div>
<div id="bottom">
<button id="left" class="left" disabled>←上一张</button>
<span id="info">1/10</span>
<button id="right" class="right">下一张 →</button>
</div>
</div>
</body>
<script>
// 获取上下张按钮
var leftBtn = document.getElementById("left");
var rightBtn = document.getElementById("right");
// 获取图片，之后会动态设置img.src
var img = document.getElementById("image");
// 底部图片 1/10 位置展示，需动态修改
var span = document.getElementById("info");
// 当前图片定位
var currentPos = 1;
// 当前图片名称+后缀
var currentImg = "01.jpg";
// 点击到下一张
rightBtn.onclick = function(){
// 上一张按钮设置可点击
leftBtn.disabled = false;
// 图片定位 +1
currentPos += 1;
// 对应的图片名称
if(currentPos < 10){
currentImg = "0"+currentPos + ".jpg"
}else{
currentImg = currentPos + ".jpg"
}
// 设置图片
img.src = "images/03/"+currentImg;
// 更改底部图片位置展示文字
span.innerText = currentPos + "/10";
// 若为最后一张，则下一张按钮不可点击
if(currentPos == 10){
this.disabled = true;
}
}
// 点击到上一张
leftBtn.onclick = function(){
// 下一张按钮可点击
rightBtn.disabled = false;
currentPos -= 1;
if(currentPos < 10){
currentImg = "0"+currentPos + ".jpg"
}else{
currentImg = currentPos + ".jpg"
}
img.src = "images/03/"+currentImg;
span.innerText = currentPos + "/10";
// 若图片为第一张，则上一张按钮不可点击
if(currentPos == 1){
this.disabled = true;
}
}
</script>
</html>