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

How to add next and previous button --- Turn.js

本文关键字：上一个 按钮 ---Turn js 下一个 何添加 添加      更新时间：2023-09-26

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

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

有人能帮我吗。

JS:

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

演示链接

jQueryTurn库支持显式翻页的方法。

为了满足您的需求，我们可以添加两个按钮，在它们上绑定点击事件，并分别调用Turn库方法（分别命名为"next"answers"previous"）。

查看此工作演示。

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

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

或

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

你会幸福的！

新年快乐
С！

相关文章：