Windy快速浏览内容插件

windy是一款酷炫的快速浏览内容插件，效果有点像发牌一样，提示演示三还带有进度条噢。

淘建站为您提供更多_图片代码_图片相册_翻书_发牌，在此特别感谢您对我们的支持与厚爱！

书本列表HTML代码

• 书名一：

  http://www.sucaiq.com/js

• 书名二：

  翻书特效http://www.sucaiq.com/php

左右导航按钮

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