当我为jQuery翻盖簿导航时，导航按钮不显示
当我为jQuery翻盖簿导航时，导航按钮不显示
提问于 2016-01-24 16:08:24
我正在创建一个活页本，其中包括精装书和页面，以呈现一个翻盖效果。
其次，我已经决定增加额外的功能，即包括在导航按钮到页的每一边的页。这是为了通知用户他们可以翻阅页面。此外，它还可以通过删除相应的导航按钮来通知用户，如果他们已经到了flipbook的末尾：
1.)第一页的翻盖簿，只有右边的导航按钮显示，而左导航按钮将隐藏。
2.)左边按钮上的最后一页将显示，而右侧按钮被隐藏。
发行：
我已经成功地为flipbook创建了导航按钮，并且在导航按钮的第一页上，左侧按钮被隐藏，而右边按钮正在显示，而当显示在flipbook的最后一页时，右侧按钮被隐藏，而左侧按钮被显示。
但是，问题在以下情况下出现：
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>
回答 2
Stack Overflow用户
发布于 2016-01-25 05:01:19
也许这是：
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");
}
}
Stack Overflow用户
发布于 2016-02-06 11:27:34
似乎和bootstrap有冲突。从页面中删除引导css时，将按预期显示正确的导航按钮。禁用引导可能不是一个令人满意的解决方案，但此发现可能是解决此问题的起点。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34978042
复制相关文章
相似问题
腾讯云开发者
