HTML5相冊滑動是一種非常流行的網頁設計方法。這種效果可以讓用戶更加直觀地瀏覽圖片，并且增強了用戶的互動體驗。下面我們來介紹一下如何使用HTML5代碼實現相冊滑動效果。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5相冊滑動效果</title>
<style>
#gallery {
height: 400px;
width: 800px;
overflow: hidden;
}
#gallery ul {
list-style: none;
margin: 0;
padding: 0;
}
#gallery li {
float: left;
}
#gallery img {
height: 400px;
width: 800px;
}
.prev,
.next {
background-color: #333;
color: #fff;
cursor: pointer;
display: block;
font-size: 24px;
padding: 10px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.prev {
left: 20px;
}
.next {
right: 20px;
}
</style>
</head>
<body>
<div id="gallery">
<ul>
<li><img src="image1.jpg"></li>
<li><img src="image2.jpg"></li>
<li><img src="image3.jpg"></li>
<li><img src="image4.jpg"></li>
</ul>
<div class="prev">Prev</div>
<div class="next">Next</div>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByTagName("img");
if (n >slides.length) {slideIndex = 1}
if (n< 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex-1].style.display = "block";
}
document.querySelector('.prev').addEventListener('click',function(){
plusSlides(-1);
});
document.querySelector('.next').addEventListener('click',function(){
plusSlides(1);
});
</script>
</body>
</html>上面的代碼中，我們首先創建了一個id為“gallery”的div，然后在里面嵌套了一個ul和四個li，每個li里面放置了一張圖片。我們通過設置overflow: hidden來隱藏多余的圖片，并使用float: left讓四張圖片并排顯示。接著，我們增加了兩個div元素，分別用于控制上一張和下一張圖片的顯示。這兩個div使用了position: absolute來將它們放在圖片旁邊，使用cursor: pointer將鼠標劃過時的指針樣式修改為手形，并使用JavaScript代碼控制圖片的滑動效果。
通過這樣簡單的代碼實現，我們就可以在網頁上創建一個簡潔美觀的相冊滑動效果。
上一篇node合并css
下一篇HTML5盒子位置代碼