js左右翻页效果代码

JavaScript 左右翻页效果通常用于创建一个可滚动的页面或内容区域，允许用户通过点击按钮或滑动手势来切换显示不同的页面或内容块。以下是一个简单的左右翻页效果的实现代码示例：

基础概念

DOM 操作：JavaScript 可以动态地修改 HTML 文档的结构。
事件监听：为按钮或其他元素添加事件监听器，以便在用户交互时触发函数。
CSS 动画：使用 CSS 来实现平滑的过渡效果。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>左右翻页效果</title>
<style>
  .container {
    width: 100%;
    overflow: hidden;
    position: relative;
  }
  .pages {
    display: flex;
    transition: transform 0.5s ease-in-out;
  }
  .page {
    min-width: 100%;
    box-sizing: border-box;
  }
  button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  #prevBtn {
    left: 10px;
  }
  #nextBtn {
    right: 10px;
  }
</style>
</head>
<body>

<div class="container">
  <div class="pages" id="pages">
    <div class="page" style="background-color: red;">页面 1</div>
    <div class="page" style="background-color: green;">页面 2</div>
    <div class="page" style="background-color: blue;">页面 3</div>
  </div>
</div>
<button id="prevBtn">上一页</button>
<button id="nextBtn">下一页</button>

<script>
  const pages = document.getElementById('pages');
  const prevBtn = document.getElementById('prevBtn');
  const nextBtn = document.getElementById('nextBtn');
  let currentPage = 0;

  function updatePages() {
    pages.style.transform = `translateX(-${currentPage * 100}%)`;
  }

  prevBtn.addEventListener('click', () => {
    currentPage = Math.max(0, currentPage - 1);
    updatePages();
  });

  nextBtn.addEventListener('click', () => {
    currentPage = Math.min(pages.children.length - 1, currentPage + 1);
    updatePages();
  });
</script>

</body>
</html>