翻页插件 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>
$(‘.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)
效果图： 样式比较简单

翻页插件 jquery

原文：https://www.cnblogs.com/CoderZX/p/10909022.html