翻页插件 jquery

//css

<style>
* {
   padding: 0;
   margin: 0;
   list-style: none;
}
.wrapper {
   width: 100%;
   cursor: pointer;
}
.wrapper > li, .wrapper > span{
   display: inline-block;
   border: 1px solid black;
   margin-right: 10px;
   padding: 5px;
}
.tabNumber.active{
      background-color: aqua;
      color: #fff;
   }
</style>

 

//html

<ul class="wrapper"></ul>
<script src='jquery.js'></script>

<script src='turnPage.js'></script>

<script> $('.wrapper').turnPage({ curPage: 5, allPage: 10, changePage(page) { console.log(page) } }) </script>

 

//turnPage.js(function ($) {

function turnPage(options) {
        this.wrap = options.wrap //父级元素
        this.curPage = options.curPage //当前页
        this.allPage = options.allPage //总页数
        this.fillHtml()  
        this.bindEvent()
        this.changePage = options.changePage //回调函数
    }
    turnPage.prototype.fillHtml = function () {
        //清空父元素内所有子元素
　　　　　$(this.wrap).empty()
　　　　　　//添加上一页
        if (this.curPage > 1) {
            $(this.wrap).append('<li class="prev-page">上一页</li>')
        }
　　　　　　//添加第一页
        if (this.curPage - 2 > 1) {
            $(this.wrap).append('<li class="tabNumber">1</li>')
        }

        if (this.curPage - 2 > 2) {
            $(this.wrap).append('<span>...</span>')
        }
        for (var i = this.curPage - 2;i < this.curPage + 2; i ++) {
            if (i > 0 && i <= this.allPage) {
                if (i === this.curPage) {
                    $(this.wrap).append('<li class="tabNumber active">'+ i +'</li>')
                } else {
                    $(this.wrap).append('<li class="tabNumber">'+ i +'</li>')
                }

            }
        }
        if (this.curPage + 1 < this.allPage) {
            $(this.wrap).append('<span >...</span>')
        }
        if (this.curPage + 2 < this.allPage) {
            $(this.wrap).append('<li class="next-page">下一页</li>')
        }
    }
    turnPage.prototype.bindEvent = function () {
        var self = this
        $('.prev-page', this.wrap).click(function () {
            if (self.curPage > 1) {
                self.curPage--
                self.change()
            }
        })
        $('.next-page',this.wrap).click(function () {
            if(self.curPage < self.allPage) {
                self.curPage++
                self.change()
            }
        })
        $('.tabNumber', this.wrap).click(function (e) {
            self.curPage = parseInt($(this).text())
            self.change()
        })
    }
    turnPage.prototype.change = function () {
        this.fillHtml()
        this.bindEvent()
        this.changePage(this.curPage)
    }
    $.fn.extend({
        turnPage: function (options) {
            options.wrap = this
            new turnPage(options)
            return this
        }
    })
})(window.jQuery)

 

效果图： 样式比较简单