HTML5 全屏翻页是一种新型的页面展示方式，它提供了更好的交互性和视觉效果。以下是一个简单的 HTML5 全屏翻页代码示例。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 全屏翻页示例</title>
<style>
body {
margin: 0;
padding: 0;
}
.page {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
display: none;
}
.page.active {
display: block;
}
</style>
</head>
<body>
<div class="page active">
<h1>第一页</h1>
<p>这是第一页内容。</p>
</div>
<div class="page">
<h1>第二页</h1>
<p>这是第二页内容。</p>
</div>
<div class="page">
<h1>第三页</h1>
<p>这是第三页内容。</p>
</div>
<script>
var pages = document.querySelectorAll('.page');
var currentPage = 0;
function showPage(index) {
if (index >= pages.length) {
return;
}
if (index < 0) {
return;
}
pages[currentPage].classList.remove('active');
currentPage = index;
pages[currentPage].classList.add('active');
}
document.addEventListener('keydown', function (event) {
if (event.keyCode === 37) {
showPage(currentPage - 1);
}
if (event.keyCode === 39) {
showPage(currentPage + 1);
}
});
</script>
</body>
</html>代码解析：
首先，我们定义了一个全屏的容器，并隐藏了所有的页面。每个页面都使用.page类来标记。显然，当前活动页总是具有.active类。
接着，我们定义了一个 JavaScript 函数showPage(index)，它根据当前页的索引显示指定页。这个函数同样用于清除当前页的.active类。
最后，我们在页面中注册了一个键盘事件监听器，这个监听器响应左右箭头键并使用showPage(index)函数展示对应的页面。
这是一个非常基本的 HTML5 全屏翻页代码示例。当然，你可以根据自己的需求修改和扩展它，以实现更加复杂和丰富的效果。