js简单的分页器插件代码实例

这篇文章主要介绍了js简单的分页器插件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

自己引入jquery插件,我的demo是引入的自己本地的query

代码如下

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
* {
 padding: 0;
 margin: 0;
 font-family: "微软雅黑";
}
li {
 list-style: none;
}
div.main-wrap {
 width: 1200px;
 height: 800px;
 position: relative;
 margin: 0 auto;
}
div.main-wrap div.paging-content {
 width: 100%;
}
div.main-wrap div.paging-content ul.pageItem {
 width: 100%;
 overflow: hidden;
 display: none;
}
div.main-wrap div.paging-content ul.pageItem.active {
 display: block;
}
div.main-wrap div.paging-content ul.pageItem li {
 width: 200px;
 height: 300px;
 margin: 10px;
 float: left;
 background: yellowgreen;
 border-radius: 8px;
 cursor: pointer;
 font-size: 50px;
 color: #fff;
 text-align: center;
 line-height: 300px;
}
div.main-wrap div.paging {
 position: absolute;
 bottom: 50px;
 left: 50%;
 margin-left: -200px;
 height: 28px;
 width: 400px;
}
div.main-wrap div.paging > span {
 display: block;
 width: 26px;
 height: 26px;
 border: 1px solid #999;
 cursor: pointer;
 float: left;
}
div.main-wrap div.paging span.prev {
 margin-right: 4px;
 background: url(../img/prevbtn.png) center no-repeat;
}
div.main-wrap div.paging span.next {
 margin-left: 4px;
 background: url(../img/nextbtn.png) center no-repeat;
}
div.main-wrap div.paging div.page-btn {
 width: 180px;
 height: 28px;
 overflow: hidden;
 float: left;
 position: relative;
}
div.main-wrap div.paging div.page-btn ul {
 width: 1000px;
 height: 28px;
 position: absolute;
 left: 0;
 top: 0;
}
div.main-wrap div.paging div.page-btn ul li {
 float: left;
 height: 26px;
 line-height: 28px;
 padding: 0 6px;
 font-size: 20px;
 color: #666;
 cursor: pointer;
}
div.main-wrap div.paging div.page-btn ul li.active {
 border-bottom: 2px solid #9ACD32;
}

  </style>
 </head>
 <body>

  <div class="main-wrap">
   <div class="paging-content">
    <ul class="pageItem paging1 active">
     <li>1</li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
    </ul>
    <ul class="pageItem paging2">
     <li>2</li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
    </ul>
    <ul class="pageItem paging3">
     <li>3</li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
    </ul>
    <ul class="pageItem paging4">
     <li>4</li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
    </ul>
    <ul class="pageItem paging5">
     <li>5</li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
    </ul>
    <ul class="pageItem paging6">
     <li>6</li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
    </ul>
    <ul class="pageItem paging7">
     <li>7</li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
    </ul>
    <ul class="pageItem paging8">
     <li>8</li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
    </ul>
   </div>
   <div class="paging">
    <span class="prev"></span>
    <div class="page-btn">
     <ul class="btn-list">
      <li class="active">2016</li>
      <li>2015</li>
      <li>2014</li>
      <li>2013</li>
      <li>2012</li>
      <li>2011</li>
      <li>2010</li>
      <li>2009</li>
     </ul>
    </div>
    <span class="next"></span>
   </div>
  </div>
 </body>
 <script type="text/javascript" src="js/jquery.js" ></script>
 <script type="text/javascript">
  $(function(){

createPage(".main-wrap",".pageItem",".prev",".next","div.page-btn",".btn-list","li",4).init();
/*
 wrap:最外层的dom
 pageItem:每页内容的wrap
 prev:上一页的按钮
 next:下一页的按钮
 btnWrap:分页器的页数的外层dom,注意:这个dom不包含prev和next
 btnBox:每个分页点的dom外层
 btn:分页点的dom
 showBtn:展示个数,默认为3个
 * */

function createPage(wrap,pageItem,prev,next,btnWrap,btnBox,btn,showBtn){
   var fn = {};
   var $wrap =$(wrap),
   $pageItem = $wrap.find(pageItem),
   $prev = $wrap.find(prev),
   $next = $wrap.find(next),
   $btnWrap = $wrap.find(btnBox),
   $btnList = $btnWrap.find(btn),
   currActive = 0,
   prevActive = 0,
   maxLen = $pageItem.length,
   showBtn = showBtn || 3,
   btnWidth = $btnList.outerWidth(),
   currLeft = 0;
   fn.init = function(){
    fn.Layer();
    fn.prev();
    fn.next();
    fn.btn();
   };
   fn.Layer = function(){
    $wrap.find(btnWrap).css("width",showBtn*btnWidth);
   };
   fn.prev = function(){
    $prev.on("click",function(){
      currActive--;
      if(currActive < 0){
       currActive = maxLen-1;
      }
      fn.changed(currActive);
    });
   };

   fn.next = function(){
    $next.on("click",function(){
     currActive++;
     if(currActive >= maxLen){
      currActive = 0;
     }
     fn.changed(currActive);

    });
   };

   fn.changed = function(index){
    if(prevActive > index){
     fn.slideBtn(index-1);
    }else{
     fn.slideBtn(index);
    }
    $btnList.eq(index).addClass("active").siblings().removeClass("active");
    $pageItem.eq(index).addClass("active").siblings().removeClass("active");
    prevActive = index;
   };

   fn.btn = function(){
    $btnWrap.on("click","li",function(){
     currActive = $(this).index();
     fn.changed(currActive);
    });
   };

 fn.slideBtn = function(index){
  currLeft = index;
  if(index < showBtn-1 ){
   currLeft = 0;
  }

  if(maxLen-index < showBtn ){
   currLeft = maxLen - showBtn;
  }
  $btnWrap.stop(true,true).animate({"left":currLeft*btnWidth*(-1)},500);
 };

  return fn;
 }
});
 </script>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • vue+vuex+json-seiver实现数据展示+分页功能

    一丶项目分析 1.UI: 2.接口信息: 二丶项目环境 Mockjs:生成模拟数据(含中文名,以及地址) json-server:模拟后端接口 webpack-dev-server:开启服务器环境+接口代理 jquery:使用jquery的ajax拉取数据 vue+vuex:vuex负责数据交互,vue渲染页面 iviewui:ui组件,方便布局 搭建开发环境 1.基本环境 Vue起步(无cli) 安装: npm install --save Mockjs 使用: 详细API:mockjs.co

  • 基于vue.js实现分页查询功能

    利用vue.js实现数据库分页,供大家参考,具体内容如下 最新项目有一个分页功能,画面风格很简朴给的样图就用[1]表示页码了, 因此,我没有上网上找插件,自己简单的做了一个.作为菜鸟,代码可能有点青涩,请见谅. 除了vue我还引用了Bootstrap的类和图标 html <div class="paging"> <ul class="pagination" style="margin: 13px"> <li clas

  • JS实现的简单分页功能示例

    本文实例讲述了JS实现的简单分页功能.分享给大家供大家参考,具体如下: HTML部分: <body onLoad="goPage(1,10);"> <table id="idData" width="70%"> <tr><td>user2</td><td>25</td><td>男</td><td>山西吕梁</td>&

  • Vue.js结合bootstrap前端实现分页和排序效果

    写之前先抱怨几句.本来一心一意做.net开发的,渐渐地成了只做前端.最近项目基本都用java做后台,我们这些.net的就成了前端,不是用wpf做界面,就是用html写web页面. 深知自己前端技术不足,以前虽说用asp.net前后台都做,但是,对于前端都是用现成的js库和页面模板,对于vue.js等框架基本没有接触过. 只怪自己不会写java,最近做一个项目,负责前端,后台传来数据不分页,前端收到所有数据后自己分页.我尽是无语. 正好最近在看vue.js.这个页面就用它来实现吧.顺便总结下. 排

  • js实现简单分页导航栏效果

    本文实例为大家分享了js实现分页导航栏效果的具体代码,供大家参考,具体内容如下 最终的效果: 1. 分页需要的几个重要参数: 总记录条数: totalCount (查数据库) 每页记录数: pageSize  (自己设置) 总页数: totalPageNum  (根据上面的参数计算) 当前页: currentPageNum (前台传入) 当前页要显示的内容 : List<PageInfo> (查数据库: pageSize和currentPageNum每页的计算起始记录索引 2. 在html页面

  • vue.js 2.0实现简单分页效果

    本文实例为大家分享了vue.js 2.0实现分页效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>vue.js 2.0 实现的简单分页</title> <style> * { margin: 0; padding: 0; box-sizing: border-box } html { fo

  • JS 使用 window对象的print方法实现分页打印功能

    最近做项目用到了web在线打印功能,经研究使用了JS自身支持的Window对象的打印方法,此种方法兼容性比较好,在IE和火狐浏览器下使用都没有问题. 1.但是网上好多案例都不支持分页功能,最后通过CSS的page-break-after:always样式解决分页问题,以下代码纯个人编写,有需要的朋友可以直接复制到网页中使用,转载请注明出处,谢谢! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo

  • 基于vue.js实现的分页

    本文主要介绍基于vue的分页原生写法. 先po上效果图: html部分,将page作为一个单独的组件 <script type="text/x-template" id="page"> <ul class="pagination"> <li v-show="current != 1" @click="current-- && goto(current)">

  • js简单的分页器插件代码实例

    这篇文章主要介绍了js简单的分页器插件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 自己引入jquery插件,我的demo是引入的自己本地的query 代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/

  • js实现图片推拉门效果代码实例

    初学者. 推拉门是网页中常见的一种形式,通过JS实现比较简单.主要是通过getElement找到节点元素,然后对其进行相应的赋值即可. 新建一个index.html文件,并在同一个目录中添加三个文件夹,images(用来当作"门"的图片),styles(用来存放css文件),scripts(用来存放js文件).然后在index.html中添加代码: <!doctype html> <html> <head> <meta charset=&quo

  • 微信小程序日历插件代码实例

    这篇文章主要介绍了微信小程序日历插件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.wxml代码 <view class="timePick"> <picker mode="date" fields="month" value="{{timestamp}}" start="1999-01-01" end="2999-

  • 多种类型jQuery网页验证码插件代码实例

    html <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,m

  • 通过vue写一个瀑布流插件代码实例

    这篇文章主要介绍了通过vue写一个瀑布流插件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 效果如图所示: 采用了预先加载图片,再计算高度的办法..网络差的情况下,可能有点卡 新建 vue-water-easy.vue 组件文件 <template> <div class="vue-water-easy" ref="waterWrap"> <div v-for="(i

  • JS对日期操作封装代码实例

    这篇文章主要介绍了JS对日期操作封装代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 格式化日期: /** * 格式化日期 * @param fmt 例如:yyyy-MM-dd 等 * @returns {*} * @constructor */ Date.prototype.Format = function (fmt) { //author: meizz var o = { "M+": this.getMonth() + 1

  • 纯js实现无缝滚动功能代码实例

    这篇文章主要介绍了纯js实现无缝滚动功能代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 HTML代码 <!--父容器要使用overflow: hidden;--> <div id="imgsList" style="height:150px;width:980px;overflow: hidden;"> <!--滚动容器--> <div id="marqu

  • js简单网速测试方法完整实例

    本文实例讲述了js简单网速测试方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <m

  • js简单实现标签云效果实例

    本文实例讲述了js简单实现标签云效果.分享给大家供大家参考.具体如下: 这里的JavaScript标签云,基于妙味课堂miaov.js文件,非常流行的网页效果,在网页的右侧或左侧开辟一小块地方,用来显示热门的标签,形式就选择标签云吧,绝对酷哦,相信你也会喜欢. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xh

  • JS简单操作select和dropdownlist实例

    本文实例讲述了JS简单操作select和dropdownlist的方法.分享给大家供大家参考.具体实现方法如下: 一.js选中服务器控件select与dropdownlist 1. js操作服务器控件select 复制代码 代码如下: <select id="selectID" onchange="return showMessage()">      <option value="0">==请选择==</optio

随机推荐