1

我正在创建一本由精装书和页面组成的翻书，以呈现翻书效果。

其次，我决定添加额外的功能，即包括在翻书页面每一侧的导航按钮中。这是为了通知用户他们可以翻阅这些页面。此外，它还用于通过删除相应的导航按钮来通知用户是否已到达翻书的末尾：

1.) 翻书的第一页，仅显示右侧导航按钮，而左侧导航按钮将隐藏。

2.) 左侧按钮的最后一页将显示，而右侧按钮隐藏。

问题：

我设法为动画书创建了导航按钮，在导航按钮的第一页上，左侧按钮隐藏，而右侧按钮显示，当在动画书的最后一页时，右侧按钮隐藏，而左键显示。

但是，在以下情况下会出现问题：

1.）用户决定从最后一页导航回来，右箭头仍然隐藏。正确的行为应该是，当用户从最后一页导航回来时，两个导航箭头都应该显示出来。

2.) 当用户导航回第一页时，右箭头按钮仍处于隐藏状态，而左导航箭头按钮仍处于显示状态。正确的行为应该是右导航箭头应该显示，而左导航箭头应该隐藏。

因此，我想寻求帮助我该如何纠正这个错误？谢谢。

function FlipbookPage() {
  $("#flipbook").turn({
    width: 400,
    height: 300,
    elevation: 130,
    //set initial page
    page: 1,
    //set the number of pages of the flipbook
    pages: 11,
    autoCenter: false
    autoCenter: true
  });
}

function CheckPage(page) {

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

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

function PreviousSlide() {
  CheckPage($("#flipbook").turn("previous"));
  console.log("previous");
}
body {
  overflow: hidden;
}
#flipbook {
  width: 400px;
  height: 300px;
}
#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: 150px;
  outline: 0px;
  z-index: 2;
  border: 0;
  background: transparent;
}
#flipbook .page {
  width: 400px;
  height: 300px;
  background-color: white;
  line-height: 300px;
  font-size: 20px;
  text-align: center;
}
.hidden {
  display: none;
}
#flipbook .page-wrapper {
  -webkit-perspective: 2000px;
  -moz-perspective: 2000px;
  -ms-perspective: 2000px;
  -o-perspective: 2000px;
  perspective: 2000px;
}
#flipbook .hard {
  background: #ccc !important;
  color: #333;
  -webkit-box-shadow: inset 0 0 5px #666;
  -moz-box-shadow: inset 0 0 5px #666;
  -o-box-shadow: inset 0 0 5px #666;
  -ms-box-shadow: inset 0 0 5px #666;
  box-shadow: inset 0 0 5px #666;
  font-weight: bold;
}
#flipbook .odd {
  background: -webkit-gradient(linear, right top, left top, color-stop(0.95, #FFF), color-stop(1, #DADADA));
  background-image: -webkit-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
  background-image: -moz-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
  background-image: -ms-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
  background-image: -o-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
  background-image: linear-gradient(right, #FFF 95%, #C4C4C4 100%);
  -webkit-box-shadow: inset 0 0 5px #666;
  -moz-box-shadow: inset 0 0 5px #666;
  -o-box-shadow: inset 0 0 5px #666;
  -ms-box-shadow: inset 0 0 5px #666;
  box-shadow: inset 0 0 5px #666;
}
#flipbook .even {
  background: -webkit-gradient(linear, left top, right top, color-stop(0.95, #fff), color-stop(1, #dadada));
  background-image: -webkit-linear-gradient(left, #fff 95%, #dadada 100%);
  background-image: -moz-linear-gradient(left, #fff 95%, #dadada 100%);
  background-image: -ms-linear-gradient(left, #fff 95%, #dadada 100%);
  background-image: -o-linear-gradient(left, #fff 95%, #dadada 100%);
  background-image: linear-gradient(left, #fff 95%, #dadada 100%);
  -webkit-box-shadow: inset 0 0 5px #666;
  -moz-box-shadow: inset 0 0 5px #666;
  -o-box-shadow: inset 0 0 5px #666;
  -ms-box-shadow: inset 0 0 5px #666;
  box-shadow: inset 0 0 5px #666;
}
<div id="flipbook">
  <!--Navigation Button-->
  <button id="LeftSide" class="hidden" onclick="PreviousSlide()">
    <img src="lib/LeftSide.png">
  </button>
  <button id="RightSide" onclick="NextSlide()">
    <img src="lib/RightSide.png">
  </button>
  <div class="hard">Turn.js</div>
  <div class="hard"></div>
  <div>Page 1</div>
  <div>Page 2</div>
  <div>Page 3</div>
  <div>Page 4</div>
  <div class="hard"></div>
  <div class="hard"></div>
</div>

4

2 回答 2

1

也许是这样：

 function CheckPage(page) {

   if ($("#flipbook").turn("page") == 1) {
     // If the page we are currently on is the first page, hide the back button
     $("#LeftSide").addClass("hidden");
   } else {
     //If we are on any other page, show the back button
     $("#LeftSide").removeClass("hidden");
   }

   if ($("#flipbook").turn("page") == 11) {
     // If the page we're on is the last page, hide the next button
     $("#RightSide").addClass("hidden");
   } else {
     //If we are on any other page, show the next button
     $("#RightSide").removeClass("hidden");
   }

 }

于 2016-01-25T05:01:19.807 回答
0

好像和bootstrap有冲突。从页面中删除引导 css 时，右侧导航按钮按预期显示。禁用引导程序可能不是一个令人满意的解决方案，但这一发现可能是解决问题的起点。

于 2016-02-06T11:27:34.643 回答