1、新建html文档。
2、书写hmtl代码。<div class="box" id="box"></div><div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"><p>不支持IE8及以下浏览器。</p>jQuery带搜索跳转滑动切换页码分页</div>
3、书写css代码。* { margin: 0; padding: 0; list-style: none稆糨孝汶; }.fl { float: left; }.box { height: 40px; line-height: 40px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; }.box button { padding: 0 10px; margin: 0 10px; height: 40px; float: left; cursor: pointer; border: 1px solid #ebebeb; background-color: #ffffff; }.box .first-page, .box .last-page { margin: 0; }.box .pageWrap { height: 40px; float: left; overflow: hidden; }.box .pageWrap ul { width: 100000px; height: 40px; float: left; }.box .pageWrap ul li { width: 60px; height: 40px; border: 1px solid #ebebeb; line-height: 40px; box-sizing: border-box; cursor: pointer; float: left; }.box .pageWrap ul .sel-page { background-color: yellow; }.box .jump-text { width: 60px; height: 40px; box-sizing: border-box; text-align: center; margin: 0 5px; float: left; }.box .jump-button { margin: 0; float: left; }.box .total-pages, .box .total-count { margin-left: 10px; float: left; font-size: 14px; }
4、书写并添加js代码。<script src="js/jquery-1.11.1.min.js"></script><s艘早祓胂cript src="js/paging.js"></script><script> var setTotalCount = 301; $('#box').paging({ initPageNo: 3, // 初始页码 totalPages: 30, //总页数 totalCount: '合计' + setTotalCount + '条数据', // 条目总数 slideSpeed: 600, // 缓动速度。单位毫秒 jump: true, //是否支持跳转 callback: function(page) { // 回调函数 console.log(page); } })</script>
5、代码整体结构。
6、查看效果。