HTML 滑動頁面是在網頁中實現頁面切換的一種方法。我們可以使用HTML標準語言結合CSS和JavaScript來實現滑動頁面效果。下面將提供一些示例代碼，幫助你了解如何實現這一效果。
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
}
.page {
height: 100vh;
width: 100vw;
position: absolute;
top: 0;
left: 0;
}
.page .content {
height: 80vh;
width: 80vw;
margin: auto;
}
</style>
<script>
window.onload = function() {
var pages = document.querySelectorAll('.page');
var current_page = 0;
pages[current_page].classList.add('active');
document.addEventListener('keydown', function(event){
if(event.keyCode === 39 && current_page< pages.length - 1) {
pages[current_page].classList.remove('active');
current_page++;
pages[current_page].classList.add('active');
}
if(event.keyCode === 37 && current_page >0) {
pages[current_page].classList.remove('active');
current_page--;
pages[current_page].classList.add('active');
}
});
};
</script>
</head>
<body>
<div class="page">
<div class="content">
<h1>第一頁</h1>
<p>這里是第一頁的內容。</p>
</div>
</div>
<div class="page">
<div class="content">
<h1>第二頁</h1>
<p>這里是第二頁的內容。</p>
</div>
</div>
</body>
</html>在這段代碼中，我們使用了CSS來定義所有頁面的樣式。我們使用了absolute來實現頁面重疊，同時還給所有頁面一個相同的height和width。在每個頁面內部，也有一個單獨的content來包含具體的內容。而在JavaScript中，我們在onload事件中為每個頁面添加了一個active類，使得它們中的第一頁能夠首先顯示。同時，我們監聽了鍵盤事件，以捕捉到用戶的「前進」和「后退」操作，使得用戶能夠在頁面之間切換。
希望這段代碼可以幫助你更好地了解如何實現 HTML 滑動頁面。如果你有任何問題或疑問，歡迎在評論區留言討論！