1
我正在创建一个由精装书和翻页效果组成的翻页书。其次，我决定添加额外的功能，即在导航按钮中包含翻页书页的每一面。这是为了通知用户他们可以浏览页面。此外，它还用于通过移除相应的导航按钮来通知用户他们是否已到达翻书结束的位置：导航按钮没有显示，当我回到jQuery翻盖簿
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>
的含义？我没有真正明白你的意思 – ernst
在我的项目中，右箭头不像你所描述的那样可见。事实证明，与bootstrap.css有冲突。这可能不一定适用于你的情况。但是，可能需要禁用其他样式表以查看是否可以解决问题。 – fan711