HTML圖片翻頁相冊可讓您在網頁上創建一個類似相冊的視覺展示效果，吸引訪客的關注。本文將介紹如何創建HTML圖片翻頁相冊的代碼。
首先，我們需要創建一個HTML頁面，并定義相冊圖片的尺寸。以下是HTML代碼示例：
<html>
<head>
<style>
/* 定義圖片尺寸*/
img{
width: 500px;
height: 300px;
}
</style>
</head>
<body>
</body>
</html>接下來，我們需要在body標簽中添加要顯示的相冊圖片。以下是一個包含4張圖片的代碼示例：<body> <div id="mygallery"> <img src="image1.jpg"> <img src="image2.jpg"> <img src="image3.jpg"> <img src="image4.jpg"> </div> </body>然后，我們需要使用JavaScript代碼創建圖片的翻頁效果。以下是JavaScript代碼示例：
<script>
var startIndex = 0; //顯示圖片的起始位置
var endIndex = 2; //顯示圖片的結束位置
var imgList = document.getElementById("mygallery").getElementsByTagName("img"); //獲取圖片列表
var imgCount = imgList.length; //獲取圖片數量
function prev(){ //前一頁
if(startIndex == 0){ return; }
startIndex--;
endIndex--;
showImages();
}
function next(){ //后一頁
if(endIndex == imgCount){return;}
startIndex++;
endIndex++;
showImages();
}
function showImages(){ //顯示圖片
for(var i=0; i<imgCount; i++){
if(i < startIndex || i >= endIndex){
imgList[i].style.display = "none";
}else{
imgList[i].style.display = "block";
}
}
}
showImages(); //顯示初始化圖片
</script>最后，我們需要在頁面中添加兩個按鈕，以便用戶可以翻頁。以下是HTML代碼示例：<body> <div id="mygallery"> <img src="image1.jpg"> <img src="image2.jpg"> <img src="image3.jpg"> <img src="image4.jpg"> </div> <div> <button onclick="prev()">上一頁</button> <button onclick="next()">下一頁</button> </div> </body>現在，您已經創建了一個基本的HTML圖片翻頁相冊。您可以根據需要調整頁面樣式和JavaScript代碼，以創建不同的效果，吸引訪問者的目光。