相冊可翻頁點擊放大代碼
HTML相冊是一種在網頁上展示圖片的常用方式，常常用于博客、網站等頁面的設計。通過HTML，我們可以輕松地制作一套美觀實用的圖片相冊。而其中，相冊可翻頁、點擊放大功能也是非常實用的設計。接下來，我們將介紹如何使用HTML代碼實現這一目的。
<html>
<head>
<title>圖片相冊</title>
<style>
.gallery {
position: relative;
margin-top: 20px;
margin-left: 50px;
}
.thumbnail {
display: inline-block;
margin-right: 10px;
margin-bottom: 10px;
cursor: pointer;
position: relative;
border: 2px solid black;
box-sizing: border-box;
}
.thumbnail:hover {
opacity: 0.7;
}
.thumbnail img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.modal {
display: none;
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.9);
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
.modal-content img {
width: 100%;
height: auto;
}
.close {
position: absolute;
top: 0;
right: 0;
font-size: 35px;
font-weight: bold;
color: white;
cursor: pointer;
}
</style>
</head>
<body>
<div class="gallery">
<div class="thumbnail">
<img src="images/pic1.jpg" alt="pic1" onclick="showModal('images/pic1.jpg')"/>
</div>
<div class="thumbnail">
<img src="images/pic2.jpg" alt="pic2" onclick="showModal('images/pic2.jpg')"/>
</div>
<div class="thumbnail">
<img src="images/pic3.jpg" alt="pic3" onclick="showModal('images/pic3.jpg')"/>
</div>
<div class="thumbnail">
<img src="images/pic4.jpg" alt="pic4" onclick="showModal('images/pic4.jpg')"/>
</div>
</div>
<div class="modal">
<span class="close" onclick="closeModal()">×</span>
<img class="modal-content" id="modal-img">
</div>
<script>
function showModal(imgSrc) {
const modal = document.querySelector('.modal');
modal.style.display = 'block';
const modalImg = document.querySelector('#modal-img');
modalImg.src = imgSrc;
}
function closeModal() {
const modal = document.querySelector('.modal');
modal.style.display = 'none';
}
</script>
</body>
</html>上述代碼中，.gallery類包含了縮略圖，而.modal則包含了在點擊縮略圖后彈出的大圖。當用戶點擊某個縮略圖時，showModal函數被調用并將大圖的src作為參數傳遞至modal，從而實現了點擊放大的功能。而當用戶點擊黑色部分區域或者關閉按鈕時，closeModal函數則會被調用，modal會再次隱藏。
綜上，HTML相冊是一個實用、美觀的設計，而使用HTML代碼實現翻頁、點擊放大的效果也是比較容易的。通過引入CSS和JS，你可以在你的網站或應用中輕松地應用這些功能，為你的用戶展示更加豐富的內容。