书本列表HTML代码

<ul id="wi-el" class="wi-container"> <li><img src="images/demo1/1.jpg" alt="image1"/><h4>书名一：</h4><p>智慧小屋https://jy.tp.yuanmeng.life/js</p></li> <li><img src="images/demo1/2.jpg" alt="image2"/><h4>书名二：</h4><p>智慧小屋翻书特效https://jy.tp.yuanmeng.life/php</p></li> </ul>

左右导航按钮

<nav>
    <span id="nav-prev">上一张</span>
    <span id="nav-next">下一张</span>
</nav>

引入jQuery库和windy插件

<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery.windy.js"></script>

调用windy插件

$(function() {
    var $el = $('#wi-el'),
            windy = $el.windy(),
            allownavnext = false,
            allownavprev = false;

    $('#nav-prev').on('mousedown', function(event) {
        allownavprev = true;
        navprev();
    }).on('mouseup mouseleave', function(event) {
        allownavprev = false;
    });

    $('#nav-next').on('mousedown', function(event) {
        allownavnext = true;
        navnext();
    }).on('mouseup mouseleave', function(event) {
        allownavnext = false;

    });
    function navnext() {
        if (allownavnext) {
            windy.next();
            setTimeout(function() {
                navnext();
            }, 150);
        }
    }
    function navprev() {
        if (allownavprev) {
            windy.prev();
            setTimeout(function() {
                navprev();
            }, 150);
        }
    }
});