写一个前端的左右滑动页面
时间: 2023-09-12 22:07:33 浏览: 49
可以使用CSS3的`transform: translateX()`属性来实现左右滑动页面的效果。具体实现步骤如下:
1. HTML结构:需要一个包含所有页面的父元素和多个子元素作为每一页。
```html
<div class="slider">
<div class="page page1">Page 1</div>
<div class="page page2">Page 2</div>
<div class="page page3">Page 3</div>
</div>
```
2. CSS样式:设置每个页面的宽度和高度,并将所有页面的父元素设置为横向排列,隐藏超出父元素宽度的部分。
```css
.slider {
width: 100%;
height: 500px;
overflow: hidden;
display: flex;
}
.page {
width: 100%;
height: 100%;
flex-shrink: 0;
text-align: center;
}
.page1 {
background-color: red;
}
.page2 {
background-color: green;
}
.page3 {
background-color: blue;
}
```
3. JavaScript代码:监听用户滑动手势并将页面滑动到相应位置。
```javascript
const slider = document.querySelector('.slider');
let isDragging = false;
let startPosition = 0;
let currentTranslate = 0;
let previousTranslate = 0;
function onTouchStart(event) {
if (event.type === 'mousedown') {
startPosition = event.pageX;
} else {
startPosition = event.touches[0].pageX;
}
isDragging = true;
slider.classList.add('grabbing');
}
function onTouchMove(event) {
if (isDragging) {
const currentPosition = event.type === 'mousemove' ? event.pageX : event.touches[0].pageX;
currentTranslate = previousTranslate + currentPosition - startPosition;
}
}
function onTouchEnd() {
isDragging = false;
slider.classList.remove('grabbing');
previousTranslate = currentTranslate;
}
slider.addEventListener('mousedown', onTouchStart);
slider.addEventListener('mousemove', onTouchMove);
slider.addEventListener('mouseup', onTouchEnd);
slider.addEventListener('touchstart', onTouchStart);
slider.addEventListener('touchmove', onTouchMove);
slider.addEventListener('touchend', onTouchEnd);
```
4. 实现滑动效果:根据用户手势滑动的距离来调整页面的位置。
```javascript
function updateSliderPosition() {
slider.style.transform = `translateX(${currentTranslate}px)`;
}
function animateSlider() {
requestAnimationFrame(animateSlider);
updateSliderPosition();
}
animateSlider();
```
完整的代码如下所示:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Slider</title>
<style>
.slider {
width: 100%;
height: 500px;
overflow: hidden;
display: flex;
}
.page {
width: 100%;
height: 100%;
flex-shrink: 0;
text-align: center;
}
.page1 {
background-color: red;
}
.page2 {
background-color: green;
}
.page3 {
background-color: blue;
}
.slider.grabbing {
cursor: grabbing;
cursor: -webkit-grabbing;
}
</style>
</head>
<body>
<div class="slider">
<div class="page page1">Page 1</div>
<div class="page page2">Page 2</div>
<div class="page page3">Page 3</div>
</div>
<script>
const slider = document.querySelector('.slider');
let isDragging = false;
let startPosition = 0;
let currentTranslate = 0;
let previousTranslate = 0;
function onTouchStart(event) {
if (event.type === 'mousedown') {
startPosition = event.pageX;
} else {
startPosition = event.touches[0].pageX;
}
isDragging = true;
slider.classList.add('grabbing');
}
function onTouchMove(event) {
if (isDragging) {
const currentPosition = event.type === 'mousemove' ? event.pageX : event.touches[0].pageX;
currentTranslate = previousTranslate + currentPosition - startPosition;
}
}
function onTouchEnd() {
isDragging = false;
slider.classList.remove('grabbing');
previousTranslate = currentTranslate;
}
function updateSliderPosition() {
slider.style.transform = `translateX(${currentTranslate}px)`;
}
function animateSlider() {
requestAnimationFrame(animateSlider);
updateSliderPosition();
}
slider.addEventListener('mousedown', onTouchStart);
slider.addEventListener('mousemove', onTouchMove);
slider.addEventListener('mouseup', onTouchEnd);
slider.addEventListener('touchstart', onTouchStart);
slider.addEventListener('touchmove', onTouchMove);
slider.addEventListener('touchend', onTouchEnd);
animateSlider();
</script>
</body>
</html>
```