javascript - 如何仅在事件簿中的第一张幻灯片后显示后退按钮

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属性(property)none在两个控制元素上 #LeftSide和 #RightSide .您只问了一半的问题 — 不要在第一页上显示 Back — 但您可能还想在最后一页上隐藏 Next。

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

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

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

附加:

首先，在您的 CSS 中，添加一个名为 hidden 的类:

.hidden {
  display: none;
}

然后将该类添加到 LeftSide 的 HTML 中 <button>元素:

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

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