html左右滑动切换内容

要实现html左右滑动切换内容，可以使用CSS3的transform属性和JavaScript的事件监听和DOM操作。

首先，需要将内容包裹在一个容器中，并设置容器的宽度为所有内容宽度之和，使得内容可以水平排列。然后，设置容器的overflow属性为hidden，隐藏超出容器宽度的内容。

接下来，使用JavaScript监听容器的touchstart、touchmove和touchend事件，通过计算手指滑动的距离和速度，实现容器的滑动效果。同时，需要根据滑动距离和速度判断应该滑动到哪一个内容区域，并将该区域的位置设置为容器的左边缘。

以下是一个示例代码：

HTML代码：

<div id="container">
  <div class="content">内容1</div>
  <div class="content">内容2</div>
  <div class="content">内容3</div>
</div>

CSS代码：

#container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0;
}

.content {
  display: inline-block;
  width: 100%;
  height: 100%;
  font-size: 16px;
  vertical-align: top;
}

JavaScript代码：

var container = document.getElementById('container');
var contents = document.querySelectorAll('.content');
var currentIndex = 0;
var startX, startY, moveX, moveY, deltaX, deltaY, startTime, endTime;
var isScrolling = false;

// 初始化容器宽度
var containerWidth = 0;
for (var i = 0; i < contents.length; i++) {
  containerWidth += contents[i].offsetWidth;
}
container.style.width = containerWidth + 'px';

// 监听touchstart事件
container.addEventListener('touchstart', function(e) {
  startX = e.touches[0].pageX;
  startY = e.touches[0].pageY;
  deltaX = 0;
  deltaY = 0;
  startTime = new Date().getTime();
  isScrolling = false;
});

// 监听touchmove事件
container.addEventListener('touchmove', function(e) {
  moveX = e.touches[0].pageX;
  moveY = e.touches[0].pageY;
  deltaX = moveX - startX;
  deltaY = moveY - startY;
  // 如果滑动距离大于10px，则认为是滑动而不是点击
  if (Math.abs(deltaX) > 10 || Math.abs(deltaY) > 10) {
    e.preventDefault();
    isScrolling = true;
    // 根据滑动距离设置容器的位置
    container.style.transform = 'translateX(' + (-(currentIndex * container.offsetWidth + deltaX)) + 'px)';
  }
});

// 监听touchend事件
container.addEventListener('touchend', function(e) {
  endTime = new Date().getTime();
  // 如果滑动时间小于250ms，并且滑动距离大于10px，则认为是快速滑动
  if (isScrolling && endTime - startTime < 250 && Math.abs(deltaX) > 10) {
    // 根据滑动速度和方向判断应该滑动到哪一个内容区域
    if (deltaX > 0) {
      currentIndex = Math.max(0, currentIndex - 1);
    } else {
      currentIndex = Math.min(contents.length - 1, currentIndex + 1);
    }
  } else {
    // 根据滑动距离和方向判断应该滑动到哪一个内容区域
    if (deltaX > 0 && Math.abs(deltaX) > container.offsetWidth / 3) {
      currentIndex = Math.max(0, currentIndex - 1);
    } else if (deltaX < 0 && Math.abs(deltaX) > container.offsetWidth / 3) {
      currentIndex = Math.min(contents.length - 1, currentIndex + 1);
    }
  }
  // 设置容器的位置
  container.style.transform = 'translateX(' + (-(currentIndex * container.offsetWidth)) + 'px)';
});

通过以上代码，就可以实现html左右滑动切换内容的效果。