基于jquery的静态页面翻页

　　最近需要用到一个静态分页（以前是php直接放过来的没有研究过），也没很多技术含量，就是方便以后用下~

　　没有封装成插件，里面代码很直白，样式，js改起来很方便。

　　作用对象: 当后台提供数据需要前台展示分页（适合分页数量比较小的项目）的时候

　　代码说明（源码有详细说明）:

var dataL = data.length;//记录data总长度
            var perPage = 3//每一页存在三条数据
            var nowIndex = 1;//记录点击的 翻页的index 为了左右按钮用
            function LR(maxVal,reducesOrPlus){
                    if(nowIndex == maxVal){
                        return false;
                    }else{
                        nowIndex = nowIndex+reducesOrPlus;
                    }//判断是否达到临界，到左右按钮那了            
                    $('span').eq(nowIndex).addClass('on').siblings().removeClass();
                    $('ul','.list').eq(nowIndex-1).show().siblings('ul').hide();
                }//LR 左右按钮点击事件

初始变量和事件

　　中心思想：根据 数据 总数量，来确定需要几个包装容器对齐包装，有几个包装容器（代码中为ul），自然要几个对应的翻页元素（代码中为span），建立好包装容器之后，可以往里面循环添加想添加的 数据个数 

　　js小tip：① !!expression 会返回一个boolean值，省的去var oBooleanObject = new Boolean(exp); 

　　　　　 　② 多余代码能重复用就用一个函数里面去通过改变不同的参数去调用（本例中的向前一页和向后一页的点击事件) 

$('.prev').click(function(){LR(1,-1)});
$('.next').click(function(){LR($('span').last().index()-1,+1)});

pre,next点击事件

下载地址

　　　　　　

转载于:https://www.cnblogs.com/boyice/p/4686004.html