如何添加下一个和上一个按钮--- Turn.js [英] How to add next and previous button --- Turn.js

问题描述

使用turn.js创建了一个flipbook演示，如果我点击角落就可以正常工作。

Created a demo of flipbook using turn.js which is working fine if I tap on the corners.

我需要添加下一个和上一个按钮，这是一个转js的功能，但我无法添加它。

I need to add the next and previous button which is a feature of turns js, but am unable to add it.

任何人都可以帮我解决。

Can anyone help me out.

JS：

$("#flipbook").turn({
    width: 400,
    height: 300,
    autoCenter: true,
    next:true
});

演示链接

推荐答案

jQuery Turn库支持方法以明确翻页。

jQuery Turn library supports methods to explicitly turn the page.

为了满足您的要求，我们可以添加两个按钮，绑定它们上的click事件并分别调用Turn库方法（名为next和previous）。

To fulfill your requirement, we can add two buttons, bind click events on them and call the Turn library methods (named "next" and "previous") respectively.

检查这个工作演示。

HTML（添加两个按钮）：

HTML (adding two buttons):

<div class="flip-control">
    <a href="#" id="prev"> Previous </a>
    <a href="#" id="next"> Next </a>
</div>

CSS（应用样式）：

CSS (applying styles) :

div.flip-control {
    width: 400px;
    text-align: center;
}

div.flip-control a {
    margin-left: 10px;
}

JavaScript：

JavaScript :

var oTurn = $("#flipbook").turn({
    width: 400,
    height: 300,
    autoCenter: true,
    next:true
});

$("#prev").click(function(e){
    e.preventDefault();
    oTurn.turn("previous");
});

$("#next").click(function(e){
    e.preventDefault();
    oTurn.turn("next");
});

这篇关于如何添加下一个和上一个按钮--- Turn.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！