多张图片切换实现书本翻页特效

awdSADASA 2024-06-28 11:39:01

实现多张图片切换实现书本翻页特效，可以通过一些简单的HTML、CSS和JavaScript来实现。以下是一个基本的示例代码，演示了如何创建一个简单的书本翻页效果：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Book Page Flip Effect</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="book">
    <div class="page">
      <img src="page1.jpg" alt="Page 1">
    </div>
    <div class="page">
      <img src="page2.jpg" alt="Page 2">
    </div>
    <div class="page">
      <img src="page3.jpg" alt="Page 3">
    </div>
    <!-- Add more pages as needed -->
    <div class="page">
      <img src="pageN.jpg" alt="Page N">
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
  margin: 0;
}

.book {
  perspective: 1000px;
  width: 400px; /* Adjust width as needed */
  height: 300px; /* Adjust height as needed */
  position: relative;
}

.page {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 1s;
  backface-visibility: hidden;
}

.page img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.page.left {
  transform: rotateY(0deg);
}

JavaScript (script.js)

const pages = document.querySelectorAll('.page');

let currentPage = 0;

function flipNext() {
  if (currentPage < pages.length - 1) {
    pages[currentPage].classList.add('right');
    currentPage++;
    pages[currentPage].classList.remove('right');
  }
}

function flipPrev() {
  if (currentPage > 0) {
    pages[currentPage].classList.add('left');
    currentPage--;
    pages[currentPage].classList.remove('left');
  }
}

document.addEventListener('keydown', function(event) {
  if (event.key === 'ArrowRight') {
    flipNext();
  } else if (event.key === 'ArrowLeft') {
    flipPrev();
  }
});

解释和使用方法：

HTML 结构：
- 使用 <div class="book"> 作为整个书本的容器。
- 每个页面使用 <div class="page"> 包裹一张图片，图片通过 <img> 标签加载。
- 可以根据需要添加更多的页面，每个页面的样式和内容可以自行调整。
CSS 样式：
- .book 类定义了书本的外观和基本样式，包括透视效果 (perspective) 和尺寸。
- .page 类定义了每一页的样式，使用 transform-style: preserve-3d; 实现立体效果。
- .page.left 和 .page.right 类定义了页面翻页时的动画效果，通过 transform: rotateY(-180deg); 和 transform: rotateY(0deg); 实现翻页效果。
JavaScript 功能：
- flipNext() 和 flipPrev() 函数实现了向前翻页和向后翻页的功能。
- 监听键盘事件 (keydown) 实现了通过键盘箭头键控制翻页的功能。