2

功能：

用户能够在翻书中导航，当退出时，翻书能够从菜单重新进入翻书并继续在翻书中导航；每次用户从主菜单进入动画书时，动画书都会重置为第一页。

做了什么：

从插件turnjs制作了一本翻书。我还添加了一个后退按钮，允许用户将翻书退出菜单以及翻书中的导航按钮，允许用户导航翻书。

问题：

当用户重新进入翻书时，页面是空白的，我无法翻动翻书，但是对于我能够翻页的情况，翻书的页面仍然是空白的。调试时，显示以下错误：

turn.js:1260 Uncaught TypeError: Cannot read property 'data' of undefined 因此 turn.js 中的以下行以星号突出显示：

var optsCorners = data.opts.turnCorners.split(','),
  ***flipData = data.pages[current].data().f,***
  opts = flipData.opts,
  actualPoint = flipData.point;

因此，我想问一下如何纠正这个问题。任何帮助深表感谢。谢谢

代码：

function Models() {
  console.log("Models");

  $("#Model_flipbook").turn({
    width: 1920,
    height: 1080,
    elevation: 130,
    autoCenter: false,

  });
}

function PreviousPage() {
  console.log("LifeStories");

  $("#Model_flipbook").load("Stories.html #Models_Page");

  $('#Button3').toggle("drop", {
    duration: slideDuration
  }, {
    easing: 'easeInOutQuart',
    queue: false
  });

  $('#Models_Page').fadeOut({
    duration: slideDuration,
    queue: false
  });
  $('#Models_Page').animate({
    'left': '1921px'
  }, {
    duration: slideDuration,
    easing: 'easeInOutQuart',
    queue: false
  });

  $('#1_Page').fadeIn({
    duration: slideDuration,
    queue: false
  });
  $('#1_Page').animate({
    'left': '0px'
  }, {
    duration: slideDuration,
    easing: 'easeInOutQuart',
    queue: false
  });
}
#Button3 {
  position: absolute;
  top: 400px;
  left: 1520px;
  outline: 0px;
  z-index: 2;
  border: 0;
  background: transparent;
}
#LeftSide {
  position: absolute;
  padding: 0;
  margin: 0;
  top: 0px;
  left: 0px;
  outline: 0px;
  z-index: 2;
  border: 0;
  background: transparent;
}
#RightSide {
  position: absolute;
  padding: 0;
  margin: 0;
  top: 0px;
  left: 1691px;
  outline: 0px;
  z-index: 2;
  border: 0;
  background: transparent;
}
#PageBack {
  position: absolute;
  top: 970px;
  left: 50px;
  outline: 0px;
  z-index: 2;
  border: 0;
  background: transparent;
}
<div id="Models_Page" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; display: none; z-index=4; top:0px; left:1921px; ">

  <button id="LeftSide" onclick="PreviousSlide()">
    <img src="lib/img/LeftSide.png">
  </button>
  <button id="RightSide" onclick="NextSlide()">
    <img src="lib/img/RightSide.png">
  </button>

  <!--Div part for keynote images-->
  <div id="Model_flipbook" style="position:absolute;">
    <div id="Model_flip_1">
      <img src="lib/img/RoleModel(KeyNote)/RoleModel(KeyNote)_1.jpeg" />
    </div>
    <div id="Model_flip_2">
      <img src="lib/img/Model(KeyNote)/Model(KeyNote)_2.jpeg" />
    </div>
    <button id="PageBack" onclick="PreviousPage()">
      <img src="lib/img/VideoBackButton.png">
    </button>
  </div>

因此，我如何才能纠正以下问题，以及当用户在退出后重新进入翻书时，翻书将重置为第一页？

4

0 回答 0