如何在动画书的第一张幻灯片后只显示后退按钮

Question

功能： 已经创建了一个幻灯片放映翻书效果，使用了以下插件：Turn.js，实现翻页效果。其次，我编辑并添加了左右按钮，以允许用户单击按钮，以便他们可以浏览页面。

问题：

两个箭头显示，即使初始&最后一页上。因此，我怎样才能设置适当的箭头出现在最初的&最后一页？只有“下一张幻灯片”箭头出现在初始页面中，上一个箭头才出现在最后一页中，而不是两个箭头出现在最初和最后一页中，就像现在发生的情况一样。

我做了什么：

我有一组同时为下一张幻灯片箭头，前一张幻灯片箭头以及作为flipbbok幻灯片主要的div一个div。此时，每个页面都会显示箭头，即使是第一页也是最后一页。

我怎么可能只有第一页上的下一个幻灯片箭头和最后一页上的上一个箭头。

任何帮助表示赞赏。

代码：

function Models() { 
 
    console.log("Models"); 
 
    $("#Model_flipbook").turn({ 
 
    width: 1920, 
 
    height: 1080, 
 
    autoCenter: false 
 
    }); 
 
} 
 

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

 

 
function PreviousSlide() { 
 
    $("#Model_flipbook").turn("previous"); 
 
    console.log("previous"); 
 
}

#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: 1691px; 
 
    outline: 0px; 
 
    z-index: 2; 
 
    border: 0; 
 
    background: transparent; 
 
}

<div id="Models_Page" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; display: none; z-index=4; top:0px; left:1921px; "> 
 

 
    <button id="LeftSide" onclick="PreviousSlide()"> 
 
    <img src="lib/img/LeftSide.png"> 
 
    </button> 
 
    <button id="RightSide" onclick="NextSlide()"> 
 
    <img src="lib/img/RightSide.png"> 
 
    </button> 
 

 
    <!--Div part for keynote images--> 
 
    <div id="Model_flipbook" style="position:absolute;"> 
 
    <div id="Model_flip_1"> 
 
     <img src="lib/img/LifeStories/Model(KeyNote)_1.jpeg" /> 
 
    </div> 
 
    <div id="Model_flip_2"> 
 
     <img src="lib/img/LifeStories/Model(KeyNote)_2.jpeg" /> 
 
    </div> 
 
    <div id="Model_flip_3"> 
 
     <img src="lib/img/LifeStories/Model(KeyNote)_3.jpeg" /> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

你会（可能）要在CSS display属性更改为none上的两个控制元件#LeftSide和#RightSide。您只问了一半问题 - 不在第一页上显示“返回” - 但您可能还想在最后一页中隐藏“下一步”。

您可以使用$("#Model_flipbook").turn("page")page property来确定每次翻页时您所在的页面。

对于问题的后半部分，请使用$("#Model_flipbook").turn("pages")pages property来计算页数。

然后，编写一个函数，检查您是否在page == 0或上，并进行适当的样式更改并从两个onclick侦听器函数中调用它。

附加：

首先，在你的CSS，添加一个名为隐藏的类：

.hidden { 
    display: none; 
} 

则该类添加到莱夫特赛德<button>元素的HTML：

<button id="LeftSide" class="hidden" onclick="PreviousSlide()"> 

然后添加一个函数，检查您正在打开的页面并设置按钮的样式：

function checkPage(page) { 

    // Total number of pages 
    var pages = $("#Model_flipbook").turn("pages"); 

    // If the page we are currently on is not the first page, reveal the back button 
    if (page > 0) { 
    $("#LeftSide").removeClass("hidden"); 
    } 

    // If the page we're on is the last page, hide the next button 
    if (page == pages) { 
    $("#RightSide").addClass("hidden"); 
    } 
} 

然后，在翻页添加到您的功能翻页功能，并下一页|上一页：

checkPage($("#Model_flipbook").turn("page")); 

注意，这很简单，但效率不高的解决方案，让你去概念。