1

我用 turnjs 插件创建了一个翻书内容。此外，我添加了两个导航按钮，以帮助用户更好地浏览翻书；左箭头（上一张幻灯片），右箭头（下一张幻灯片）。

此外，我为通过翻书实现导航箭头设置了以下功能：

1.) 翻书的第一页，只显示右箭头，隐藏左箭头

2.) 后续页面将同时显示左右箭头

3.) 当用户导航到最后一页时，右箭头将被隐藏，只显示左箭头。

4.）当用户从最后一页导航回来时，因此，在最后一页到上一页之后，两个箭头都应该显示

5.) 当用户导航回到第一页时，左箭头将被隐藏，只有右箭头会显示。

因此，这些是定义翻书中导航按钮行为的以下功能。

问题：

我可以将导航按钮的功能设置为功能 3。）。因此，问题源于功能 4。因此，在用户导航到最后一页并决定从最后一页返回后，右箭头仍然隐藏。其次，用户导航回到第一页后，右箭头仍然隐藏，而左箭头仍然显示。

因此，我想问一下如何解决以下问题。

代码：

function Models() {
  $("#Model_flipbook").turn({
    width: 1920,
    height: 1080,
    elevation: 130,
    //set initial page
    page: 1,
    //set the number of pages of the flipbook
    pages: 11,
    autoCenter: false
  });
}

function ModelCheckPage(page) {

  if ($("#Model_flipbook").turn("page") > 1 && $("#Model_flipbook").turn("page") < 11) {
    // If the page we are currently on is not the first page, reveal the back button
    $("#Model_LeftSide").removeClass("hidden");
  } else if ($("#Model_flipbook").turn("page") == 11) {
    // If the page we're on is the last page, hide the next button
    $("#Model_RightSide").addClass("hidden");
  }
}

function NextSlide() {
  ModelCheckPage($("#Model_flipbook").turn("next"));
  console.log("next");
}

function PreviousSlide() {
  ModelCheckPage($("#Model_flipbook").turn("previous"));
  console.log("previous");
}
  #Model_LeftSide {
    position: absolute;
    padding: 0;
    margin: 0;
    top: 0px;
    left: 0px;
    outline: 0px;
    z-index: 2;
    border: 0;
    background: transparent;
  }
  #Model_RightSide {
    position: absolute;
    padding: 0;
    margin: 0;
    top: 0px;
    left: 150px;
    outline: 0px;
    z-index: 2;
    border: 0;
    background: transparent;
  }
  .hidden {
    display: none;
  }
<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="Model_LeftSide" class="hidden" onclick="PreviousSlide()">
    <img src="lib/img/LeftSide.png">
  </button>
  <button id="Model_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/Model(KeyNote)_1.jpeg" />
    </div>
    <div id="Model_flip_2">
      <img src="lib/img/Model(KeyNote)_2.jpeg" />
    </div>
    //.....(mulitple flip pages content).....
  </div>
</div>

4

0 回答 0