用jQuery写的一个翻页，并封装为插件，

用jQuery写的一个翻页，并封装为插件，

*{
    margin:0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}
.page{
    width:500px;
    margin:100px auto;
    color: #ccc;
}
.page a{
    display: inline-block;
    color: #428bca;
    height: 25px;
    line-height: 25px;
    padding: 0 10px;
    border: 1px solid #ddd;
    margin: 0 2px;
    border-radius: 4px;
    vertical-align: middle;
}
.page a:hover{
    border: 1px solid #428bca;
}
.page .current{
    display: inline-block;
    height: 25px;
    line-height: 25px;
    padding: 0 10px;
    margin: 0 2px;
    color: #fff;
    background-color: #428bca;
    border: 1px solid #428bca;
    border-radius: 4px;
    vertical-align: middle;
}
.page .disabled{
    display: inline-block;
    height: 25px;
    line-height: 25px;
    padding: 0 10px;
    margin: 0 2px;
    color: #bfbfbf;
    background: #f2f2f2;
    border: 1px solid #bfbfbf;
    border-radius: 4px;
    vertical-align: middle;
}

css自己随便写一下就行，

(function($){
    function init(dom, args){
        if (args.pageCount >= args.current){
            createPage(dom, args);
            bindEvent(dom, args);
        }else{
            alert("输入页码大于页数！")
        }
    }
    function createPage(dom,args){        
        dom.empty();
        if(args.current != 1){
            dom.append('<a href = "#" class="prevPage">上一页</a>');
        }else{
            dom.append('<span class="disabled">上一页</span>');
        }

        if (args.current >= 4){
            dom.append('<a href = "#" class="tcdNumber">' + 1 + '</a>');
        }
        if (args.current >= 5){
            dom.append('<span>...</span>');
        }
        for (var i = args.current-2; i < args.current + 3; i ++){
            if (i > 0 && i <= args.pageCount){
                if(i == args.current){
                    dom.append('<span class="current">' + args.current + '</span>');
                }else{
                    dom.append('<a href = "#" class="tcdNumber">'+ i +'</a>');
                }
            }
        }
        if (args.current <= args.pageCount - 5){
            dom.append('<span>...</span>');
        }
        if (args.current <= args.pageCount - 4){
            dom.append('<a href = "#" class="tcdNumber">' + args.pageCount + '</a>');
        }
        if(args.current != args.pageCount){
            dom.append('<a href = "#" class="nextPage">下一页</a>');
        }else{
            dom.append('<span class="disabled">下一页</span>');
        }
    }
    function bindEvent(dom,args){
        dom.on('click','.prevPage',function(){
            args.current--;
            createPage(dom,args);
            args.backFunction(args)
        })
        dom.on('click','.tcdNumber',function(){
            args.current = parseInt($(this).text());
            createPage(dom,args);
            args.backFunction(args)
        })
        dom.on('click','.nextPage',function(){
            args.current++;
            createPage(dom,args);
            args.backFunction(args)
        })
    }
    $.fn.createPage = function(options){
        var args = $.extend({
            pageCount : 1,
            current : 1,
            backFunction : function(){}
        },options);
        init(this,args);
    }
}(jQuery))  

 <div class="page"></div>
    <script>
        $(".page").createPage({
            pageCount : 15,
            current : 5,
            backFunction : function(arr){
                console.log(arr.current)
            }
        })
    </script>