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 相关文章推荐
JQuery跨Iframe选择实现代码
Aug 19 Javascript
基于JavaScript实现动态创建表格和增加表格行数
Dec 20 Javascript
js插件dropload上拉下滑加载数据实例解析
Jul 27 Javascript
JavaScript中的冒泡排序法
Aug 03 Javascript
浅谈JavaScript 中有关时间对象的方法
Aug 15 Javascript
Vue方法与事件处理器详解
Dec 01 Javascript
微信小程序 MD5加密登录密码详解及实例代码
Jan 12 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
Feb 19 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
May 17 Javascript
javascript帧动画(实例讲解)
Sep 02 Javascript
详解webpack-dev-server的简单使用
Apr 02 Javascript
一步一步实现Vue的响应式(对象观测)
Sep 02 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截取汉字乱码问题解决方法mb_substr函数的应用
2008/03/30 PHP
hessian 在PHP中的使用介绍
2010/12/13 PHP
php join函数应用
2011/05/04 PHP
一个典型的PHP分页实例代码分享
2011/07/28 PHP
php数组函数序列之asort() - 对数组的元素值进行升序排序,保持索引关系
2011/11/02 PHP
PHP实现驼峰样式字符串(首字母大写)转换成下划线样式字符串的方法示例
2017/08/10 PHP
基于php解决json_encode中文UNICODE转码问题
2020/11/10 PHP
让插入到 innerHTML 中的 script 跑起来的实现代码
2006/07/01 Javascript
js 效率组装字符串 StringBuffer
2009/12/23 Javascript
js 键盘记录实现(兼容FireFox和IE)
2010/02/07 Javascript
js中哈希表的几种用法总结
2014/01/28 Javascript
判断在css加载完毕后执行后续代码示例
2014/09/03 Javascript
Javascript 中创建自定义对象的方法汇总
2014/12/04 Javascript
推荐4个原生javascript常用的函数
2015/01/12 Javascript
JS函数的几种定义方式分析
2015/12/17 Javascript
javascript中使用未定义变量或值的情况分析
2016/07/19 Javascript
微信小程序 配置文件详细介绍
2016/12/14 Javascript
vue中添加mp3音频文件的方法
2018/03/02 Javascript
Python中基础的socket编程实战攻略
2016/06/01 Python
Python补齐字符串长度的实例
2018/11/15 Python
python调用虹软2.0第三版的具体使用
2019/02/22 Python
python查看矩阵的行列号以及维数方式
2020/05/22 Python
Python爬虫获取豆瓣电影并写入excel
2020/07/31 Python
详解Python3 定义一个跨越多行的字符串的多种方法
2020/09/06 Python
python 实现简易的记事本
2020/11/30 Python
详解Python中的Lock和Rlock
2021/01/26 Python
分享CSS3制作卡片式图片的方法
2016/07/08 HTML / CSS
美国演唱会订票网站:Ticketmaster美国
2017/10/05 全球购物
最好的意大利皮夹克:D’Arienzo
2018/12/04 全球购物
精彩的广告词
2014/03/19 职场文书
公司行政专员岗位职责
2014/08/24 职场文书
工作失误检讨书(3篇)
2014/10/11 职场文书
nginx反向代理时如何保持长连接
2021/03/31 Servers
PHP控制循环操作的时间
2021/04/01 PHP
Django实现聊天机器人
2021/05/31 Python
Redis中有序集合的内部实现方式的详细介绍
2022/03/16 Redis