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


Posted in Javascript onSeptember 11, 2019

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

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

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

代码如下

<!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>

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

Javascript 相关文章推荐
用javascript实现给图片加链接
Aug 15 Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
Jun 17 Javascript
动态显示可输入的字数提示还可以输入的字数
Apr 01 Javascript
Node.js安装教程和NPM包管理器使用详解
Aug 16 Javascript
JS实现判断碰撞的方法
Feb 11 Javascript
jQuery Validation Plugin验证插件手动验证
Jan 26 Javascript
JS 清除字符串数组中,重复元素的实现方法
May 24 Javascript
JS新包管理工具yarn和npm的对比与使用入门
Dec 09 Javascript
详解从买域名到使用pm2部署node.js项目全过程
Mar 07 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
Sep 25 Javascript
Vue+Element实现动态生成新表单并添加验证功能
May 23 Javascript
angular组件间通讯的实现方法示例
May 07 Javascript
解决在layer.open中使用时间控件laydate失败的问题
Sep 11 #Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
Sep 11 #Javascript
layer弹出层扩展主题的方法
Sep 11 #Javascript
手写Vue弹窗Modal的实现代码
Sep 11 #Javascript
js回溯法计算最佳旅行线路代码实例
Sep 11 #Javascript
layer更改皮肤的实现方法
Sep 11 #Javascript
node 解析图片二维码的内容代码实例
Sep 11 #Javascript
You might like
PHP生成静态页
2006/11/25 PHP
php中0,null,empty,空,false,字符串关系的详细介绍
2013/06/20 PHP
解析php中获取url与物理路径的总结
2013/06/21 PHP
php将字符串转化成date存入数据库的两种方式
2014/04/28 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
JS+css 图片自动缩放自适应大小
2013/08/08 Javascript
js 绑定键盘鼠标事件示例代码
2014/02/12 Javascript
javascript生成随机颜色示例代码
2014/05/05 Javascript
jQuery中DOM操作实例分析
2015/01/23 Javascript
Javascript实现网络监测的方法
2015/07/31 Javascript
JavaScript判断FileUpload控件上传文件类型
2015/09/28 Javascript
JavaScript图像延迟加载库Echo.js
2016/04/05 Javascript
js实现上传图片及时预览
2016/05/07 Javascript
jQuery图片瀑布流的简单实现代码
2017/03/15 Javascript
JS SetInterval 代码实现页面轮询
2017/08/11 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
2018/05/10 Javascript
js canvas画布实现高斯模糊效果
2018/11/27 Javascript
layer设置maxWidth及maxHeight解决方案
2019/07/26 Javascript
JS实现水平移动与垂直移动动画
2019/12/19 Javascript
VsCode里的Vue模板的实现
2020/08/12 Javascript
element中table高度自适应的实现
2020/10/21 Javascript
python从入门到精通(DAY 3)
2015/12/20 Python
浅谈pandas用groupby后对层级索引levels的处理方法
2018/11/06 Python
python爬虫获取小区经纬度以及结构化地址
2018/12/30 Python
如何使用python操作vmware
2019/07/27 Python
Flask框架学习笔记之使用Flask实现表单开发详解
2019/08/12 Python
python对象销毁实例(垃圾回收)
2020/01/16 Python
PyQt5+Pycharm安装和配置图文教程详解
2020/03/24 Python
canvas绘制圆角头像的实现方法
2019/01/17 HTML / CSS
FORZIERI福喜利中国官网:奢侈品购物梦工厂
2019/05/03 全球购物
娇韵诗俄罗斯官方网站:Clarins俄罗斯
2020/10/03 全球购物
科颜氏印度官网:Kiehl’s印度
2021/02/20 全球购物
小学中秋节活动方案
2014/02/06 职场文书
安全大检查实施方案
2014/02/22 职场文书
感谢信模板大全
2015/01/23 职场文书
python lambda 表达式形式分析
2022/04/03 Python