Question

功能性：

用户可以在翻书中导航，当退出时，翻书可以从菜单中重新进入翻书，并继续浏览翻书;每当用户从主菜单进入翻书时，翻书将重置为第一页。

已完成的工作：

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

问题：

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

turn.js：1260未捕获的TypeError：无法读取属性＆＃39;数据＆＃39;未定义的其中turn.js中的以下行以星号突出显示：

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
  });
}

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

代码：

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

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

Flipbook未显示并显示错误

0 个答案: