原生jquery实现移动端滑动分页

使用jQuery实现移动端滑动分页，可以通过监听触摸事件来完成。以下是一个简单的示例代码：

HTML部分：

<div id="content">
  <div class="page">页面1</div>
  <div class="page">页面2</div>
  <div class="page">页面3</div>
  <!-- 更多页面... -->
</div>

CSS部分：

#content {
  overflow: hidden;
  position: relative;
}
.page {
  position: absolute;
  width: 100%;
  height: 100%;
}

jQuery部分：

$(function() {
  var $pages = $('.page');
  var pageWidth = $pages.width();
  var pageCount = $pages.length;
  var currentPage = 0;
  
  $('#content').on('touchstart', function(e) {
    e.preventDefault();
    startX = e.originalEvent.touches[0].pageX;
  });
  
  $('#content').on('touchmove', function(e) {
    e.preventDefault();
    moveX = e.originalEvent.touches[0].pageX;
    diffX = moveX - startX;
    
    if (diffX > 0) { // 向右滑动
      if (currentPage > 0) {
        $(this).css('left', '+=' + (-diffX) + 'px');
      }
    } else { // 向左滑动
      if (currentPage < pageCount - 1) {
        if (Math.abs(diffX) > (pageWidth / 2)) {
          $(this).css('left', '+=' + (-diffX) + 'px');
        }
      }
    }
  });
  
  $('#content').on('touchend', function(e) {
    e.preventDefault();
    if (Math.abs(diffX) > (pageWidth / 2)) {
      currentPage = Math.min(pageCount - 1, Math.max(0, currentPage + (diffX < 0 ? 1 : -1)));
      $(this).animate({
        left: -currentPage * pageWidth
      }, 300);
    } else {
      $(this).animate({
        left: -currentPage * pageWidth
      }, 300);
    }
  });
});

这段代码使用了touchstart, touchmove, 和 touchend事件来监听触摸行为。通过计算开始和结束时的位置差异，来判断是滑动页面还是滑动切换。currentPage变量用于跟踪当前的页码，并在滑动结束时更新内容区域的left值以显示相应的页面。这个简单的例子提供了一个基础，您可以根据需要添加更多的功能，如动画完成的回调函数、页面边界检查等。