HTML滾動電子相冊是一種讓圖片可以自動滾動顯示的特效效果。這種效果可以通過在HTML中使用JavaScript代碼來實現。
以下是一個HTML滾動電子相冊的示例代碼：
<html>
<head>
<script>
//定義一個變量用于記錄當前顯示的圖片的索引值
var index = 0;
//定義一個數組用于存儲圖片的路徑
var imageList = [
"image1.jpg",
"image2.jpg",
"image3.jpg",
"image4.jpg",
"image5.jpg"
];
//定義一個函數用于在頁面中顯示當前圖片
function showImage() {
//獲取一個img標簽
var img = document.getElementById("img");
//設置img標簽的src屬性
img.src = imageList[index];
}
//定義一個函數用于切換圖片
function changeImage() {
//修改index變量的值
index++;
//判斷是否已經顯示完了所有的圖片
if(index >= imageList.length) {
index = 0;
}
//顯示當前圖片
showImage();
}
//定義一個定時器，用于定時切換圖片
setInterval(changeImage, 3000);
</script>
</head>
<body>
<img id="img" />
</body>
</html>在上述代碼中，首先定義了一個變量index，用于記錄當前顯示的圖片的索引值。然后定義了一個數組imageList，用于存儲所有圖片的路徑。接著定義了一個函數showImage，用于在頁面中顯示當前圖片。最后定義了一個函數changeImage，用于切換圖片，以及一個定時器setInterval，用于定時調用changeImage函數切換圖片，從而實現自動滾動的效果。
上一篇css ul 什么意思
下一篇html滿屏顯示怎么設置