如何添加下一步和上一步按钮- Turn.js

Question

使用turn.js创建了动画书的演示，如果我点击角落，它可以很好地工作。

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

有人能帮帮我吗。

JS：

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

demo Link

Answer 1

jQuery翻页库支持methods显式翻页。

为了满足您的需求，我们可以添加两个按钮，在其上绑定单击事件，并分别调用Turn库方法(名为"next“和"previous")。

检查此working demo。

HTML (添加两个按钮)：

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

CSS (应用样式)：

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

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

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");
});

Answer 2

$('.sj-book').turn('previous');

或

$('.sj-book').turn('next');

你会很开心的！

新年快乐！

Сновымгодом！