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

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

　　想要得到类似这样效果：

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

　　于是决定自己写一个。

　　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 实现分页区翻页的更多相关文章

  1. jquery.Table实现的翻页功能比较完整漂亮，本想扩展个模版DIV

    jquery.dataTable实现的翻页功能比较完整漂亮,本想提取其的翻页部分,再结合模版DIV,bootstrop实现聊天记息的展示. jquery.Table 与table结合的较紧,不能在很下 ...

  2. JeeSite数据分页与翻页

    本文章介绍的是JeeSite开源项目二次开发时的一些笔记,对于没有使用过JeeSite的可以不用往下看了,因为下面的代码是跟JeeSite二次开发相关的代码,不做JeeSite的二次开发,以下代码对您 ...

  3. JS调用水晶报表打印翻页按钮事件

    默认的水晶报表打印按钮.翻页按钮太小,并且样式不好调整,考虑自己做一个按钮,然后调用水晶报表的按钮事件. 在实际操作中发现可以在.net按钮的服务器端事件中调用翻页方法: CrystalReportV ...

  4. turn.js中文API 写一个翻页效果的参数详细解释

    $('.flipbook').turn({     width: 922,     height: 600,     elevation: 50,     gradients: true,     a ...

  5. jquery easyui datagrid 在翻页以后仍能记录被选中的行及刷新设置选中行数据

    //easyUI的datagrid在复选框多选时,如何在翻页以后仍能记录被选中的行://注意datagrid中需要配置idField属性,一般为数据的主键 $.ajax({ type: 'GET', ...

  6. 使用switchPage.js插件jQuery全屏滚动翻页

    1. 先引入jquery.js,再引入switchPage.js 文件地址:点击打开链接 <script src="jquery.min.js"></script ...

  7. jquery css3问卷答题卡翻页动画效果

    这个选项调查的特效以选项卡的形式,每答完一道题目自动切换到下一条,颇具特色.使用jQuery和CSS3,适合HTML5浏览器. 效果展示 http://hovertree.com/texiao/jqu ...

  8. 织梦DEDECMS网站首页如何实现分页翻页

    织梦DEDECMS模板网站首页如何实现首页分页和翻页 方法如下:(三种方法,自己选择一种来实现分页吧) 第一种:调用ajax和参数的(不推荐)1.必须在DEDE首页模板中的<head>&l ...

  9. asp.net中应用JQuery.pagination分页

    JQuery.pagination这款分页控件非常好用,可实现无刷新分页,为了方便下次做项目便于拷贝,所以在此发布一下,具体的实现流程如下: 效果图: JQuery.pagination的各个参数的说 ...

随机推荐

  1. 常用phpstorm快捷键

    欢迎提交你经常使用的快捷键 ctrl+j 插入活动代码提示 ctrl+alt+t 当前位置插入环绕代码 alt+insert 生成代码菜单 ctrl+q 查看代码注释 ctrl+d 复制当前行 ctr ...

  2. Laravel通过用户名和密码查询

    一.如果要检查要验证的用户数据是否正确,可以使用: if (Auth::validate($credentials)) { // } 二.但是如果您想通过用户和密码从数据库中获取用户,您可以使用: / ...

  3. 火狐浏览器将网页保存为pdf

    目录 火狐打印功能 火狐插件 save as pdf 深夜更博仙女镇 @ 有时候查一些技术博客之类的,当时收藏了,过一阵子再想查看的时候发现404了,所以稳妥的办法还是将把网页保存为pdf. 火狐打印 ...

  4. AcWing 1017. 怪盗基德的滑翔翼

    #include<iostream> using namespace std ; ; int f[N],g[N]; int w[N]; int main() { int t; cin> ...

  5. mysql内核测试&原理学习

    参考资料:https://www.cnblogs.com/f-ck-need-u/p/9001061.html#blog5

  6. 关于testbench

    区别与verilog HDL代码,主要留意以下内容: 1,语言本身支持的特征和可综合的代码是两回事,不是所有verilog语言都可以转化为硬件的. 2,testbench作为top module,不需 ...

  7. 在UTF-8页面中引入编码为GBK的JavaScript文件乱码问题了

    原文地址:http://js8.in/2009/12/11/%E5%AF%B9%E5%BC%95%E7%94%A8%E5%A4%96%E9%83%A8javascript%E9%A1%B5%E9%9D ...

  8. 钉钉内网穿透工具在windows的使用。

    钉钉内网穿透工具在windows环境下使用 1.WIN+R,然后cmd,调出dos控制台 2.进入内网穿透程序ding.exe所在目录 3.执行 ./ding.exe -config=ding.cfg ...

  9. mysql 父子表 注意事项

    今天遇到一个问题,父子表关联查询时总是多出几条数据,后来排查是父子关系的字段 类型不一致导致的

  10. 通过JMX获取JVM信息

    package com.googosoft.gateway_zuul; import java.lang.management.ClassLoadingMXBean; import java.lang ...