帮我用html和css和js写一个翻书的页面,点击翻页
时间: 2023-03-14 13:41:28 浏览: 69
好的,那我们可以这样做:
HTML:
```
<div id="book">
<div class="page">第一页</div>
<div class="page">第二页</div>
<div class="page">第三页</div>
<!-- 更多页面 -->
</div>
<button id="prev-page-btn">上一页</button>
<button id="next-page-btn">下一页</button>
```
CSS:
```
#book {
width: 500px;
height: 700px;
position: relative;
}
.page {
width: 500px;
height: 700px;
position: absolute;
top: 0;
left: 0;
}
```
JavaScript:
```
const book = document.querySelector('#book');
const pages = book.querySelectorAll('.page');
let currentPage = 0;
document.querySelector('#prev-page-btn').addEventListener('click', () => {
pages[currentPage].style.display = 'none';
currentPage = Math.max(currentPage - 1, 0);
pages[currentPage].style.display = 'block';
});
document.querySelector('#next-page-btn').addEventListener('click', () => {
pages[currentPage].style.display = 'none';
currentPage = Math.min(currentPage + 1, pages.length - 1);
pages[currentPage].style.display = 'block';
});
```
这样你就可以点击按钮来翻页了。
你也可以使用 CSS 的 `transition` 和 `transform` 属性来让翻页效果看起来更自然,具体的语法可以百度或者谷歌。