Turn.js 插件实现翻书效果以及其目录

Turn.js 是一个基于 jQuery 的插件，可以实现网页版的翻书效果。它支持多种设备，包括桌面浏览器、平板电脑和移动设备。通过 Turn.js，可以实现类似于纸质书籍的翻页效果，同时还可以添加书签、目录等功能。

以下是使用 Turn.js 实现翻书效果和添加目录的简单步骤：

1. 引入 Turn.js 插件及其依赖库（jQuery 和 turn.min.js）：

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="path/to/turn.min.js"></script>

2. 创建一个包含书页内容的容器：

<div id="flipbook">
  <div class="page">Page 1</div>
  <div class="page">Page 2</div>
  <div class="page">Page 3</div>
  <div class="page">Page 4</div>
</div>

3. 初始化 Turn.js 插件：

$("#flipbook").turn({
  width: 800, // 容器宽度
  height: 600, // 容器高度
  autoCenter: true // 自动居中
});

4. 添加目录：

// 定义目录项
var pages = [
  {name: "Page 1", page: 1},
  {name: "Page 2", page: 2},
  {name: "Page 3", page: 3},
  {name: "Page 4", page: 4}
];

// 创建目录容器
var $bookmarks = $("<ul/>", {"class": "bookmarks"});

// 添加目录项
$.each(pages, function(index, page) {
  $("<li/>")
    .html("<a href='#' data-page='" + page.page + "'>" + page.name + "</a>")
    .appendTo($bookmarks);
});

// 插入到页面中
$bookmarks.appendTo($("#flipbook"));

// 绑定目录项的点击事件
$(".bookmarks a").on("click", function() {
  var page = $(this).data("page");
  $("#flipbook").turn("page", page);
  return false;
});

通过以上步骤，就可以实现基本的翻书效果和目录功能。如果需要更多的自定义样式和交互效果，可以参考 Turn.js 的官方文档进行调整。