原生js实现相册效果（样例），手动切换上下张图片【含代码】
原生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/10span><button id="right" class="right">下一张 →button>div>div>
body>
<script>// 获取上下张按钮var leftBtn = document.getElementById("left");var rightBtn = document.getElementById("right");// 获取图片，之后会动态设置img.srcvar img = document.getElementById("image");// 底部图片 1/10 位置展示，需动态修改var span = document.getElementById("info");// 当前图片定位var currentPos = 1;// 当前图片名称+后缀var currentImg = "01.jpg";// 点击到下一张rightBtn.onclick = function(){// 上一张按钮设置可点击leftBtn.disabled = false;// 图片定位 +1currentPos += 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>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！