turnjs steve jobs 示例 - 如何加载前 4 页答案

【问题标题】：turnjs steve jobs example - how to load first 4 pagesturnjs steve jobs 示例 - 如何加载前 4 页
【发布时间】：2013-04-04 22:13:36
【问题描述】：

我是 turn.js 的新手，我正在尝试修改它附带的 steve 工作手册。

这本书的前 3 页是图片，用 css 设置，像这样

.sj-book .p1,
.sj-book .p2,
.sj-book .p3, 
.sj-book .p111, 
.sj-book .p112{
    background-color:white;
    background-image:url(../pics/book-covers.jpg) !important;
}

但是，我想像其他页面一样将前 4 个页面加载为普通的 html 页面（例如 page1.html）。但是，代码似乎只在第 5 页开始加载页面。如果我向缺少动态加载页面的函数添加警报，则加载的第一页是第 5 页

缺少：功能（e，页面）{

for (var i = 0; i < pages.length; i++) {
alert(pages[i]);
addPage(pages[i], $(this));}

}

当图书第一次加载时，此警报会出现两次 - 第 5 页和第 6 页 - 这是有道理的，因为图书仅在内存中保留了 6 页 - 但为什么图书没有加载第 1 到第 4 页?我已经为 pages 目录中的第 1-4 页创建了必要的 html 文件，但它们没有加载。

非常感谢

【问题讨论】：

具有讽刺意味的是，我一发布问题就找到了答案 - github.com/blasten/turn.js/issues/306。谢谢

标签： turnjs

【解决方案1】：

如参考链接所示：https://github.com/blasten/turn.js/issues/306

我们需要执行以下步骤

1) 删除以下 HTML（作为对页面的静态引用）

<div depth="5" class="hard">
      <div class="side"></div>
</div>

<div depth="5" class="hard front-side">
      <div class="depth"></div>
</div>

<div class="own-size"></div>    
<div class="own-size even"></div>

2) 删除相应的 CSS 作为 ques 中的地址

.sj-book .p1,
.sj-book .p2,
.sj-book .p3, 
.sj-book .p111, 
.sj-book .p112{
    background-color:white;
    background-image:url(../pics/book-covers.jpg) !important;
}

3) 将相应的页面复制到具有名称的页面文件夹中 Page1.html Page2.html 等等..

【讨论】：