2

功能： 创建了一个带有翻书效果的幻灯片，并利用以下插件： 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>

4

1 回答 1

1

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

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

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

然后，编写一个函数来检查您是否打开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") );

请注意，这是一个简单但低效的解决方案，可以让您在概念上进行。

于 2016-01-12T02:49:17.353 回答