请给我一个带滑动页面并且可跳转的网页
时间: 2023-07-15 11:15:16 浏览: 51
可以尝试这个例子:
```html
<!DOCTYPE html>
<html>
<head>
<title>滑动页面示例</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
.container {
height: 100vh;
width: 100vw;
display: flex;
flex-direction: row;
}
.page {
height: 100vh;
width: 100vw;
flex-shrink: 0;
position: relative;
}
.page-1 {
background-color: #f5f5f5;
}
.page-2 {
background-color: #dcdcdc;
}
.page-3 {
background-color: #c9c9c9;
}
.page-4 {
background-color: #b6b6b6;
}
.page-5 {
background-color: #a3a3a3;
}
.btn {
position: absolute;
bottom: 20px;
right: 20px;
padding: 10px;
background-color: #333;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<div class="page page-1"></div>
<div class="page page-2"></div>
<div class="page page-3"></div>
<div class="page page-4"></div>
<div class="page page-5"></div>
</div>
<button class="btn">下一页</button>
<script>
const container = document.querySelector('.container');
const pages = document.querySelectorAll('.page');
const btn = document.querySelector('.btn');
let current = 0;
btn.addEventListener('click', () => {
current++;
if (current >= pages.length) {
current = 0;
}
container.style.transform = `translateX(-${current * 100}vw)`;
})
</script>
</body>
</html>
```
这个例子使用了 flexbox 布局来实现滑动页面效果。可以通过点击按钮来切换页面。