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实现的鼠标链接提示效果生成器代码
Jun 28 Javascript
自己开发Dojo的建议框架
Sep 24 Javascript
Firebug入门指南(Firefox浏览器)
Aug 21 Javascript
jquery关于图形报表的运用实现代码
Jan 06 Javascript
Ubuntu 11.10 安装Node.js的方法
Nov 30 Javascript
一个背景云变换js特效 鼠标移动背景云变化
Dec 28 Javascript
jquery禁止回车触发表单提交
Dec 12 Javascript
浅谈jQuery中setInterval()方法
Jul 07 Javascript
javascript实现禁止鼠标滚轮事件
Jul 24 Javascript
jquery按回车键实现表单提交的简单实例
May 25 Javascript
移动端使用localResizeIMG4压缩图片
Apr 22 Javascript
vue cli4中mockjs在dev环境和build环境的配置详情
Apr 06 Vue.js
解决在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读取csv实现csv文件下载功能
2013/12/18 PHP
phplot生成图片类用法详解
2015/01/06 PHP
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中
2007/04/20 Javascript
JQuery 学习笔记01 JQuery初接触
2010/05/06 Javascript
基本jquery的控制tabs打开的数量的代码
2010/10/17 Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
2011/03/05 Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
2012/03/01 Javascript
js实现拖拽效果
2015/02/12 Javascript
JS烟花背景效果实现方法
2015/03/03 Javascript
JS实现霓虹灯文字效果的方法
2015/08/06 Javascript
jquery ztree异步搜索(搜叶子)实践
2016/02/25 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
2016/09/01 Javascript
JavaScript实现经典排序算法之冒泡排序
2016/12/28 Javascript
微信小程序开发之Tabbar实例详解
2017/01/09 Javascript
JQuery.dataTables表格插件添加跳转到指定页
2017/06/09 jQuery
Bootstrap与Angularjs的模态框实例代码
2017/08/03 Javascript
使用Node.js实现简易MVC框架的方法
2017/08/07 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
2018/03/22 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
2019/02/20 Javascript
Vue自定义多选组件使用详解
2020/09/08 Javascript
Python os模块介绍
2014/11/30 Python
Python单例模式实例分析
2015/01/14 Python
Python文件和目录操作详解
2015/02/08 Python
python执行子进程实现进程间通信的方法
2015/06/02 Python
攻击者是如何将PHP Phar包伪装成图像以绕过文件类型检测的(推荐)
2018/10/11 Python
python实现操作文件(文件夹)
2019/10/31 Python
Python基于正则表达式实现计算器功能
2020/07/13 Python
为有想象力的人提供的生活方式商店:Firebox
2018/06/04 全球购物
Java语言程序设计测试题选择题部分
2014/04/03 面试题
《路旁的橡树》教学反思
2014/04/07 职场文书
欢迎横幅标语
2014/06/17 职场文书
摘录式读书笔记
2015/07/01 职场文书
MySql新手入门的基本操作汇总
2021/05/13 MySQL
使用tensorflow 实现反向传播求导
2021/05/26 Python
低门槛开发iOS、Android、小程序应用的前端框架详解
2021/10/16 Javascript
Java8 Stream API 提供了一种高效且易于使用的处理数据的方式
2022/04/13 Java/Android