相簿是人們保存和分享美好時刻的一種方式，而JavaScript能夠幫助我們實現一個具備相簿功能的網站。本文將介紹如何使用JavaScript製作一個簡單的相簿。
一、準備工作
在製作相簿之前，我們需要先準備一些素材，例如圖片和CSS檔案。建議將圖片保存在一個獨立的資料夾中，以便於後續的引用和管理。
二、HTML結構
相簿的核心是展示圖片，因此我們需要建立一個圖片展示的HTML結構。具體來說，我們可以使用以下的HTML程式碼：
<div class="gallery">
<div class="thumbnails">
<!-- 用于展示照片缩略图的容器 -->
</div>
<div class="photo">
<img id="photoImg" src="" alt="照片">
<div class="nav">
<button id="prevBtn" class="btn">上一张</button>
<button id="nextBtn" class="btn">下一张</button>
</div>
</div>
</div>在上述HTML結構中，.gallery是最外層的容器，.thumbnails是用於展示縮圖的容器，.photo是用來展示圖片的容器，.nav是用來展示上一張和下一張按鈕的容器。
三、CSS樣式
為了讓相簿具備美觀的外觀，我們需要使用CSS為上述HTML結構添加樣式。具體來說，我們需要為.gallery、.thumbnails、.photo和.nav添加樣式，例如：
.gallery {
max-width: 800px;
margin: auto;
}
.thumbnails img {
max-width: 100%;
height: auto;
cursor: pointer;
}
.photo {
text-align: center;
margin-top: 20px;
}
#photoImg {
max-width: 100%;
height: auto;
}
.nav {
margin-top: 20px;
}
.btn {
display: inline-block;
margin-right: 20px;
padding: 5px 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}上述CSS樣式只是一個範例，可以根據自己的需求進行調整。
四、JavaScript互動
有了HTML結構和CSS樣式，我們現在需要透過JavaScript為相簿新增互動功能。具體來說，我們需要實現以下功能：
為了實作這些功能，我們可以寫以下JavaScript程式碼：
// 照片列表
const photoList = [
{
src: "./images/1.jpg",
alt: "第一张照片"
},
{
src: "./images/2.jpg",
alt: "第二张照片"
},
{
src: "./images/3.jpg",
alt: "第三张照片"
}
];
// 缩略图列表
const thumbList = [
"./images/thumb/1.jpg",
"./images/thumb/2.jpg",
"./images/thumb/3.jpg"
];
// 当前照片下标
let currentPhotoIndex = 0;
// 初始化缩略图
const thumbnails = document.querySelector(".thumbnails");
thumbList.forEach((thumbUrl, i) => {
const img = document.createElement("img");
img.src = thumbUrl;
img.alt = `缩略图${i + 1}`;
img.addEventListener("click", () => {
showPhoto(i);
});
thumbnails.appendChild(img);
});
// 初始化照片
showPhoto(currentPhotoIndex);
// 切换上一张照片
document.querySelector("#prevBtn").addEventListener("click", () => {
currentPhotoIndex = currentPhotoIndex > 0 ? currentPhotoIndex - 1 : photoList.length - 1;
showPhoto(currentPhotoIndex);
});
// 切换下一张照片
document.querySelector("#nextBtn").addEventListener("click", () => {
currentPhotoIndex = currentPhotoIndex < photoList.length - 1 ? currentPhotoIndex + 1 : 0;
showPhoto(currentPhotoIndex);
});
// 展示指定下标的照片
function showPhoto(index) {
const photoImg = document.querySelector("#photoImg");
photoImg.src = photoList[index].src;
photoImg.alt = photoList[index].alt;
}在上述JavaScript程式碼中，我們定義了一個photoList陣列與一個 thumbList數組，分別保存照片和縮圖的位址。在頁面加載完成後，我們透過forEach函數建立了縮圖列表，並為每個縮圖綁定了一個click事件，在點擊後展示對應的照片。同時，我們也監聽了上一張和下一張按鈕的點擊事件，並根據目前照片的下標來切換照片。
到此為止，我們已經可以使用JavaScript製作一個簡單的相簿了。當然，為了讓相簿更加豐富和完善，我們還可以添加一些其他的功能，例如：
總之，JavaScript提供了無限的可能性，只要善加利用，就可以製作出功能強大、美觀精緻的相簿。
以上是怎麼用JavaScript做相冊的詳細內容。更多資訊請關注PHP中文網其他相關文章！
