HTML5有許多令人驚喜的新功能，其中之一是左右翻頁效果。在這篇文章中，我們將介紹如何使用HTML5、CSS3和JavaScript實現一個簡單的左右翻頁效果。
<!DOCTYPE html>
<html>
<head>
<title>左右翻頁效果</title>
<style>
/* 設置容器樣式 */
.container {
position: relative;
width: 600px;
height: 400px;
margin: 0 auto;
overflow: hidden;
}
/* 設置頁面樣式 */
.page {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* 使用Flexbox布局實現水平和垂直居中 */
display: flex;
justify-content: center;
align-items: center;
/* 設置頁面背景 */
background-color: #f1f1f1;
}
/* 設置上一頁和下一頁按鈕樣式 */
.button {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 30px;
color: #333;
cursor: pointer;
}
/* 設置上一頁按鈕樣式 */
.prev {
left: 20px;
}
/* 設置下一頁按鈕樣式 */
.next {
right: 20px;
}
/* 設置第二頁樣式 */
.page-2 {
background-color: #ff8800;
}
/* 設置第三頁樣式 */
.page-3 {
background-color: #00bfff;
}
</style>
</head>
<body>
<div class="container">
<div class="page page-1">
<h1>第一頁</h1>
</div>
<div class="page page-2">
<h1>第二頁</h1>
</div>
<div class="page page-3">
<h1>第三頁</h1>
</div>
<div class="button prev"><i class="fas fa-chevron-left"></i></div>
<div class="button next"><i class="fas fa-chevron-right"></i></div>
</div>
<script>
// 獲取元素
var container = document.querySelector('.container');
var pages = document.querySelectorAll('.page');
var prev = document.querySelector('.prev');
var next = document.querySelector('.next');
// 初始化
var current = 0; // 當前頁面的索引
// 點擊上一頁按鈕
prev.addEventListener('click', function() {
if (current >0) {
current--;
turnPage();
}
});
// 點擊下一頁按鈕
next.addEventListener('click', function() {
if (current< pages.length - 1) {
current++;
turnPage();
}
});
// 翻頁函數
function turnPage() {
// 計算容器移動的距離
var distance = -current * 100;
// 移動容器
container.style.transform = 'translateX(' + distance + '%)';
}
</script>
</body>
</html>