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实现点击按钮,连续地向textarea中添加值的实例代码
Mar 08 Javascript
对之前写的jquery分页做下升级
Jun 19 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
Feb 03 Javascript
JavaScript简介
Feb 15 Javascript
JS模拟实现Select效果代码
Sep 24 Javascript
js和jquery实现监听键盘事件示例代码
Jun 24 Javascript
jQuery中deferred对象使用方法详解
Jul 14 Javascript
轮播图组件js代码
Aug 08 Javascript
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
从零搭一个自用的前端脚手架的方法步骤
Sep 23 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
利用javaScript处理常用事件详解
Apr 14 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/12/06 PHP
PHP 数组排序方法总结 推荐收藏
2010/06/30 PHP
PHP 无限分类三种方式 非函数的递归调用!
2011/08/26 PHP
php防止伪造的数据从URL提交方法
2014/06/27 PHP
YII Framework框架教程之国际化实现方法
2016/03/14 PHP
ThinkPHP模板循环输出Volist标签用法实例详解
2016/03/23 PHP
原生php实现excel文件读写的方法分析
2018/04/25 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
Javascript 面向对象(二)封装代码
2012/05/23 Javascript
解析jquery获取父窗口的元素
2013/06/26 Javascript
8个实用的jQuery技巧
2014/03/04 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
2014/06/27 Javascript
jQuery分组选择器用法实例
2014/12/23 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
2016/01/12 Javascript
WEB前端实现裁剪上传图片功能
2016/10/17 Javascript
对vux点击事件的优化详解
2018/08/28 Javascript
微信小程序实现带缩略图轮播效果
2018/11/04 Javascript
微信小程序vant弹窗组件的实现方式
2020/02/21 Javascript
Javascript数组及类数组相关原理详解
2020/10/29 Javascript
基于Cesium绘制抛物弧线
2020/11/18 Javascript
python数据结构树和二叉树简介
2014/04/29 Python
在Python的Django框架中编写错误提示页面
2015/07/22 Python
python实现web方式logview的方法
2015/08/10 Python
python 对key为时间的dict排序方法
2018/10/17 Python
Python小工具之消耗系统指定大小内存的方法
2018/12/03 Python
python opencv实现图像边缘检测
2019/04/29 Python
Python爬取智联招聘数据分析师岗位相关信息的方法
2019/08/13 Python
Python(PyS60)实现简单语音整点报时
2019/11/18 Python
pytorch 实现tensor与numpy数组转换
2019/12/27 Python
Python模拟登入的N种方式(建议收藏)
2020/05/31 Python
印度尼西亚值得信赖的第一家网店:Bhinneka
2018/07/16 全球购物
承诺保证书格式
2015/02/28 职场文书
第一书记观后感
2015/06/08 职场文书
Nginx URL重写rewrite机制原理及使用实例
2021/04/01 Servers
Anaconda配置各版本Pytorch的实现
2021/08/07 Python
Nginx开源可视化配置工具NginxConfig使用教程
2022/06/21 Servers