js + jquery 实现分页区翻页

　　简单来说，情况是这样的，假如做好了对动漫每一集进行分页，如下图：

　　但当分页太多就会变得不能看，而且前后箭头也不能只是摆设。

　　想要得到类似这样效果：

　　网上搜了一会翻页相关的库没什么效果，也不太合适自己的项目应用。

　　于是决定自己写一个。

　　pageturn.js:

function get_segment(aid, size) {
    var start = 0, end = 0;
    var count_switch = true;
    for (var i = 1; i <= size; i++) {
        if (document.getElementById(aid + i.toString()).style.display != 'none') {
            if (count_switch) {
                start = i;
                count_switch = false;
            }
            else {
                end = i;
            }
        }
    }
    return [start, end];
};

function prev_page_turn(aid, start, end, step) {
    for (var i = 0; i < step; i++) {
        if (start == 1)
            break;

        $("#" + aid + end.toString()).hide(500);

        start -= 1;

        $("#" + aid + start.toString()).show(500);

        end -= 1;
    }
};

function next_page_turn(aid, start, end, step, size) {
    for (var i = 0; i < step; i++) {
        if (end == size)
            break;


        $("#" + aid + start.toString()).hide(500);

        end += 1;

        $("#" + aid + end.toString()).show(500);

        start += 1;
    }
};

　　# 用法见 31 line

　　test.html:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="pageturn.js"></script>
</head>

<body>
    <ul class="pagination">
        <li><a id="prev-page">«</a></li>
        <li><a href="#" id="av8299421" title="夢ちゃん">第 1 集</a></li>
        <li><a href="#" id="av8299422" title="夢ちゃん">第 2 集</a></li>
        <li><a href="#" id="av8299423" title="夢ちゃん">第 3 集</a></li>
        <li><a href="#" id="av8299424" title="夢ちゃん">第 4 集</a></li>
        <li><a href="#" id="av8299425" title="夢ちゃん">第 5 集</a></li>
        <li><a href="#" id="av8299426" title="夢ちゃん" style="display:none">第 6 集</a></li>
        <li><a href="#" id="av8299427" title="夢ちゃん" style="display:none">第 7 集</a></li>
        <li><a href="#" id="av8299428" title="夢ちゃん" style="display:none">第 8 集</a></li>
        <li><a href="#" id="av8299429" title="夢ちゃん" style="display:none">第 9 集</a></li>
        <li><a href="#" id="av82994210" title="夢ちゃん" style="display:none">第 10 集</a></li>
        <li><a href="#" id="av82994211" title="夢ちゃん" style="display:none">第 11 集</a></li>
        <li><a href="#" id="av82994212" title="夢ちゃん" style="display:none">第 12 集</a></li>
        <li><a href="#" id="av82994213" title="夢ちゃん" style="display:none">第 13 集</a></li>
        <li><a href="#" id="av82994214" title="夢ちゃん" style="display:none">第 14 集</a></li>
        <li><a id="next-page">»</a></li>
    </ul>
    <script type="text/javascript">
        $(document).ready(function () {
            var size = 14; // 集数
            var aid = "av829942"; // 视频 id 前缀
            var prev_click = true;
            var next_click = true;
            $('#prev-page').bind('click', function () {
                if (prev_click) {
                    prev_click = false;
                    var get_value = get_segment(aid, size);
                    var start = get_value[0], end = get_value[1];

                    if (start > 1) {
                        prev_page_turn(aid, start, end, 3);
                    }
                    setTimeout(function () {
                        prev_click = true;
                    }, 500);
                }
            });
            $('#next-page').bind('click', function () {
                if (next_click) {
                    next_click = false;
                    var get_value = get_segment(aid, size);
                    var start = get_value[0], end = get_value[1];

                    if (end < size) {
                        next_page_turn(aid, start, end, 3, size);
                    }
                    setTimeout(function () {
                        next_click = true;
                    }, 500);
                }
            });
        });
    </script>
</body>

</html>

　　可自行配制 step 来控制点一次的翻页速度。

js + jquery 实现分页区翻页

猜你喜欢