基于纯 JavaScript 实现的图书翻页效果，它带有下一页和上一页按钮，可通过翻页动画切换图片，使用起来也很简单，只需要在前后容器中添加图片（作为背景），代码就会自动渲染出逼真的图书翻页风格切换效果。

使用方法：

首先，创建一个类名为 "right "的 div 元素，然后放置两个类名分别为 "back "和 "front "的 figure 图元素（index.html）。 将背景图片 URL 放在 back 和 front 容器的样式属性中。 对下一张幻灯片重复同样的方法。 您可以根据需要添加多个页面。

<div class="right">
  <figure class="back" id="back-cover"></figure>
  <figure class="front" style="background-image: url('页背景图片地址');"></figure>
</div>

然后，在项目中为翻页幻灯片添加 CSS 样式（style.css），类似下面：

.book-section{
    height: 100vh;
    width: 100%;
    padding: 40px 0;
    text-align: center;
}
.book-section > .container{
    height: 400px;
    width: 500px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2%;
    margin-bottom: 30px;
    perspective: 1200px;
}
.container > .right{
    position: absolute;
    height: 100%;
    width: 50%;
    transition: 0.7s ease-in-out;
    transform-style: preserve-3d;
}
.book-section > .container > .right{
    right:0;
    transform-origin: left;
    border-radius: 10px 0 0 10px;
}
...

最后，添加类似以下 JavaScript 代码（script.js），激活翻页图书图片翻页。

var right = document.getElementsByClassName("right");
    var si = right.length;
    var z=1;
    turnRight();
    ...