js实现书籍翻页

<div class="book">
  <div class="page">Page 1</div>
  <div class="page">Page 2</div>
  <div class="page">Page 3</div>
  <!-- 更多页面 -->
</div>
<button onclick="prevPage()">Previous</button>
<button onclick="nextPage()">Next</button>

.book {
  position: relative;
  width: 200px;
  height: 300px;
  perspective: 1000px;
}

.page {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  transform-origin: left;
  transition: transform 1s;
}

.page.flipped {
  transform: rotateY(-180deg);
}

let currentPage = 0;
const pages = document.querySelectorAll('.page');
const totalPages = pages.length;

function updatePages() {
  pages.forEach((page, index) => {
    if (index < currentPage) {
      page.classList.add('flipped');
    } else if (index === currentPage) {
      page.classList.remove('flipped');
    } else {
      page.classList.add('flipped');
    }
  });
}

function nextPage() {
  if (currentPage < totalPages - 1) {
    currentPage++;
    updatePages();
  }
}

function prevPage() {
  if (currentPage > 0) {
    currentPage--;
    updatePages();
  }
}

// 初始化页面状态
updatePages();