h5实现左右分页

实现左右分页的基本思路

在HTML5中实现左右分页效果，可以通过CSS布局和JavaScript交互结合完成。核心是利用Flexbox或Grid布局划分左右区域，并通过滑动或按钮触发翻页逻辑。

HTML结构设计

创建基础HTML结构，包含左右分页的容器和内容区域：

<div class="page-container">
  <div class="left-page">左侧内容</div>
  <div class="right-page">右侧内容</div>
</div>
<button class="prev-btn">上一页</button>
<button class="next-btn">下一页</button>

CSS布局实现

使用Flexbox实现左右分页布局，并隐藏溢出部分：

.page-container {
  display: flex;
  width: 200%; /* 两倍宽度容纳左右两页 */
  transition: transform 0.5s ease;
}
.left-page, .right-page {
  width: 50%; /* 每页占据一半容器宽度 */
  height: 300px;
  border: 1px solid #ddd;
}
.prev-btn, .next-btn {
  margin-top: 20px;
}

JavaScript交互逻辑

添加按钮事件监听器控制页面滑动：

const container = document.querySelector('.page-container');
const prevBtn = document.querySelector('.prev-btn');
const nextBtn = document.querySelector('.next-btn');
let currentPage = 0;

nextBtn.addEventListener('click', () => {
  if(currentPage < 1) {
    currentPage++;
    container.style.transform = `translateX(-${currentPage * 50}%)`;
  }
});

prevBtn.addEventListener('click', () => {
  if(currentPage > 0) {
    currentPage--;
    container.style.transform = `translateX(-${currentPage * 50}%)`;
  }
});

触摸滑动支持

为移动端添加触摸事件支持：

let startX, moveX;
container.addEventListener('touchstart', (e) => {
  startX = e.touches[0].pageX;
});

container.addEventListener('touchmove', (e) => {
  moveX = e.touches[0].pageX;
});

container.addEventListener('touchend', () => {
  if(startX - moveX > 50 && currentPage < 1) {
    currentPage++;
    container.style.transform = `translateX(-${currentPage * 50}%)`;
  }
  if(moveX - startX > 50 && currentPage > 0) {
    currentPage--;
    container.style.transform = `translateX(-${currentPage * 50}%)`;
  }
});

响应式调整

通过媒体查询适应不同屏幕尺寸：

@media (max-width: 768px) {
  .page-container {
    width: 100%;
    flex-direction: column;
  }
  .left-page, .right-page {
    width: 100%;
  }
}

页面指示器增强

添加页面位置指示器提升用户体验：

<div class="page-indicator">
  <span class="dot active"></span>
  <span class="dot"></span>
</div>

对应CSS样式：

.page-indicator {
  text-align: center;
  margin: 10px 0;
}
.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ccc;
  margin: 0 5px;
}
.dot.active {
  background: #333;
}

JavaScript更新指示器状态：

const dots = document.querySelectorAll('.dot');
function updateIndicator() {
  dots.forEach((dot, index) => {
    dot.classList.toggle('active', index === currentPage);
  });
}
// 在翻页事件后调用updateIndicator()