如何仅在活动簿中的第一张幻灯片后显示后退按钮

Question

功能： 制作了一个带有翻页效果的幻灯片，使用了如下插件：Turn.js，实现了翻页效果。其次，我编辑并添加了左右按钮，以允许用户单击按钮，以便他们可以浏览页面。

问题：

两个箭头都显示了，甚至在初始页和最后一页上也是如此。因此，我如何才能将适当的箭头设置为出现在初始页面和最后一页上？只有下一张幻灯片箭头出现在初始页面和上一个箭头出现在最后一页，而不是两个箭头都出现在初始页面和最后一页，就像现在发生的那样。

我做了什么：

我为下一个幻灯片箭头和上一个幻灯片箭头以及 flipbbok 幻灯片的主要 div 设置了一个 div。此时，每一页都会显示箭头，即使是第一页和最后一页。

我怎么可能第一页只有下一个幻灯片箭头，最后一页只有上一个箭头。

感谢任何帮助。

代码：

function Models() {
  console.log("Models");
  $("#Model_flipbook").turn({
    width: 1920,
    height: 1080,
    autoCenter: false
  });
}

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


function PreviousSlide() {
  $("#Model_flipbook").turn("previous");
  console.log("previous");
}

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

<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/LifeStories/Model(KeyNote)_1.jpeg" />
    </div>
    <div id="Model_flip_2">
      <img src="lib/img/LifeStories/Model(KeyNote)_2.jpeg" />
    </div>
    <div id="Model_flip_3">
      <img src="lib/img/LifeStories/Model(KeyNote)_3.jpeg" />
    </div>
  </div>
</div>

Answer 1

您（可能）想要将 CSS display 属性两个控件元素 #LeftSide 和 #RightSide 更改为 none ].您只问了一半的问题 — 不要在第一页显示 Back — 但您可能还想在最后一页隐藏 Next。

您可以使用 $("#Model_flipbook").turn("page") page property 来确定您每次翻页时所在的页面。

对于问题的后半部分，使用 $("#Model_flipbook").turn("pages") pages property 来获取页数。

然后，编写一个函数来检查您是否在 page == 0 或 page == pages 上，并进行适当的样式更改并从您的两个 onclick 侦听器函数中调用它。

补充：

首先，在您的 CSS 中添加一个名为 hidden 的 class：

.hidden {
  display: none;
}

然后将 class 添加到 LeftSide <button> 元素的 HTML 中：

<button id="LeftSide" class="hidden" onclick="PreviousSlide()">

然后添加一个函数来检查您所在的页面并设置按钮样式：

function checkPage(page) {

  // Total number of pages
  var pages = $("#Model_flipbook").turn("pages");

  // If the page we are currently on is not the first page, reveal the back button
  if (page > 0) {
    $("#LeftSide").removeClass("hidden");
  }

  // If the page we're on is the last page, hide the next button
  if (page == pages) {
    $("#RightSide").addClass("hidden");
  } 
}

然后在你的翻页函数中添加这个，翻页后的NextPage和PreviousPage：

checkPage( $("#Model_flipbook").turn("page") );

请注意，这是一种简单但效率低下的解决方案，无法让您从概念上着手。

如何仅在活动簿中的第一张幻灯片后显示后退按钮

how to only show back button after the first slide in flipbook

javascript

jquery

turnjs