3D相冊是一種非常流行的網絡相冊，可以幫助人們分享他們的照片和視頻，并以非常生動的方式展示它們。如果您想嘗試制作自己的3D相冊，HTML代碼是必不可少的。在下面的示例中，我們將向您展示如何使用HTML和JavaScript代碼來制作一個簡單的3D相冊。
<!DOCTYPE html>
<html>
<head>
<title>3D相冊制作</title>
<style>
#carousel {
position: relative;
overflow: hidden;
width: 800px;
height: 400px;
margin: 0 auto;
}
#carousel ul {
position: absolute;
width: 600%;
list-style: none;
margin: 0;
padding: 0;
left: 0;
}
#carousel li {
float: left;
width: 16.666666%;
}
.btn-group {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.btn-group button {
background-color: #555;
color: white;
border: none;
cursor: pointer;
padding:10px 20px;
font-size: 16px;
margin: 10px;
opacity: 0.5;
transition: opacity 0.6s;
}
.btn-group button:hover {
opacity: 1;
}
.active {
opacity: 1;
}
</style>
</head>
<body>
<div id="carousel">
<ul>
<li><img src="photo1.jpg"></li>
<li><img src="photo2.jpg"></li>
<li><img src="photo3.jpg"></li>
<li><img src="photo4.jpg"></li>
<li><img src="photo5.jpg"></li>
<li><img src="photo6.jpg"></li>
</ul>
<div class="btn-group">
<button onclick="prev()">Prev</button>
<button onclick="next()" class="active">1</button>
<button onclick="next()">2</button>
<button onclick="next()">3</button>
<button onclick="next()">4</button>
<button onclick="next()">5</button>
</div>
</div>
<script>
var currentSlide = 0;
function next() {
currentSlide++;
if (currentSlide >= 6) {
currentSlide = 0;
}
document.querySelector("#carousel ul").style.left = -100 * currentSlide + "%";
updateButtons();
}
function prev() {
currentSlide--;
if (currentSlide < 0) {
currentSlide = 5;
}
document.querySelector("#carousel ul").style.left = -100 * currentSlide + "%";
updateButtons();
}
function updateButtons() {
var buttons = document.querySelectorAll(".btn-group button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].classList.remove("active");
}
buttons[currentSlide + 1].classList.add("active");
}
</script>
</body>
</html>以上代碼中，我們創建了一個名為“carousel”的容器，里面包含了一個包含所有圖片的無序列表（ul）以及一個包含所有按鈕的div元素。我們設置了容器的寬度，高度和邊距等屬性，讓它成為一個漂亮的3D相冊。我們還添加了兩個JavaScript函數“next”和“prev”，用來控制幻燈片的滑動效果，從而顯示不同的圖片序列。最后，我們還添加了一個更新按鈕樣式的函數“updateButtons”，以及一些CSS樣式來控制按鈕的布局和外觀。