Я создаю флип-книгу, состоящую из твердой обложки и страниц для рендеринга эффекта флипбука.Кнопка навигации не отображается, когда я перехожу назад для jQuery flipbook
Во-вторых, я решил добавить дополнительные функции, то есть включить в навигационную кнопку с каждой стороны страниц флип-книги. Это означает, что пользователи могут перелистывать страницы. Кроме того, он также используется для уведомления пользователей, если они подошли к концу флип-книги, удалив соответствующую навигационную кнопку:
1.) На первой странице флип-книги отображается только правая кнопка навигации, а левая кнопка навигации будет скрыта.
2.) Последняя страница на левой кнопке будет отображаться, пока правая кнопка не будет скрыта.
Выпуск:
мне удалось создать навигационную кнопку для 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>
смысл? Я не совсем понимаю, что вы имеете в виду. – ernst
В моем проекте стрелка вправо не была видна, как вы описали. Оказалось, что возник конфликт с bootstrap.css. Это может не обязательно относиться к вашему делу. Однако, возможно, стоит отключить другие таблицы стилей, чтобы выяснить, устраняет ли проблема. – fan711