Question

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

问题：

即使在最初的＆amp;最后一页。因此，我如何设置适当的箭头出现在初始＆amp;最后一页？只有下一张幻灯片箭头出现在初始页面中，而上一张箭头出现在最后一页，而不是两张箭头出现在首页和最后一页，就像现在发生的一样。

我做了什么：

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

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

感谢任何帮助。

代码：

＆＃13;

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

＆＃13;

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

＆＃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/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>

＆＃13;

Answer 1

您可能（可能）想要将两个控制元素display和none上的CSS #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 <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") );

请注意，这是一个简单但效率低下的解决方案，可以帮助您从概念上进行操作。

如何只在flipbook中的第一张幻灯片后显示后退按钮

1 个答案: