Question

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

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

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>

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

Answer 2

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

当我向后导航jQuery flipbook

2 个答案: