html左右滑动切换页面

你可以使用CSS3中的`transform`属性来实现左右滑动切换页面的效果。具体步骤如下：

1. 首先需要创建一个容器，用来包含所有的页面。这个容器需要设置为相对定位`position: relative;`，并且设置宽度为所有页面的宽度之和。例如：

<div class="container">
  <div class="page" id="page1">Page 1</div>
  <div class="page" id="page2">Page 2</div>
  <div class="page" id="page3">Page 3</div>
</div>

.container {
  position: relative;
  width: 300%;
}

2. 接着需要给每个页面设置绝对定位，并且设置`left`属性为当前页面宽度乘以页面索引号。例如：

.page {
  position: absolute;
  width: 33.33%;
  height: 100%;
  top: 0;
}

#page1 {
  left: 0%;
}

#page2 {
  left: 33.33%;
}

#page3 {
  left: 66.66%;
}

3. 最后，使用JavaScript监听滑动事件，根据手指移动的距离来设置容器的`transform`属性，从而实现左右滑动切换页面的效果。例如：

var container = document.querySelector('.container');
var startX = 0;
var startY = 0;
var currentX = 0;
var currentY = 0;
var deltaX = 0;
var deltaY = 0;
var threshold = 50; // 滑动阈值，超过这个值才会切换页面

container.addEventListener('touchstart', function(e) {
  startX = e.touches[0].clientX;
  startY = e.touches[0].clientY;
});

container.addEventListener('touchmove', function(e) {
  e.preventDefault(); // 阻止默认滚动事件
  currentX = e.touches[0].clientX;
  currentY = e.touches[0].clientY;
  deltaX = currentX - startX;
  deltaY = currentY - startY;
  container.style.transform = 'translateX(' + (-deltaX) + 'px)';
});

container.addEventListener('touchend', function(e) {
  if (Math.abs(deltaX) > threshold) {
    // 切换页面
    if (deltaX > 0) {
      container.style.transform = 'translateX(0)';
    } else {
      container.style.transform = 'translateX(-100%)';
    }
  } else {
    // 恢复原位
    container.style.transform = 'translateX(0)';
  }
});

注意，这只是一个简单的示例，实际应用中可能需要更加复杂的逻辑来处理页面之间的切换。