JavaScript
搜索
分类

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

作者：muamaker 时间：2024-04-29 13:23:22　

这篇文章主要介绍了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>

来源：https://www.cnblogs.com/muamaker/p/6232866.html

标签：js,分页器,插件
0
投稿

猜你喜欢

  • Mysql Binlog数据查看的方法详解

    2024-01-27 18:26:22

  • python的数据与matlab互通问题:SciPy

    2022-05-16 04:53:48

  • python中字典增加和删除使用方法

    2023-12-15 15:31:30

  • JSP连接MySQL数据库详细步骤

    2024-01-25 07:03:49

  • Python网络爬虫与信息提取(实例讲解)

    2022-10-27 20:53:04

  • SQLSERVER数据备份文件的分割备份方法

    2024-01-15 15:30:39

  • Python处理文本文件中控制字符的方法

    2022-02-24 09:16:05

  • 对Python3中dict.keys()转换成list类型的方法详解

    2021-02-13 12:18:26

  • tensorflow使用指定gpu的方法

    2022-10-23 16:00:31

  • Python列表元素删除和remove()方法详解

    2023-04-07 08:48:54

  • MySQL数据库设置远程访问权限方法小结

    2024-01-16 11:12:24

  • SQLSERVER 本地查询更新操作远程数据库的代码

    2023-07-23 21:58:55

  • 破解空间实现域名绑定到子目录方法

    2010-03-14 11:29:00

  • SQL Server 总结复习 （二）

    2012-10-07 10:35:00

  • 深入解析Python编程中JSON模块的使用

    2022-11-30 00:21:27

  • 用 JS 来控制 target 链接属性

    2007-10-08 12:59:00

  • 数据库应用经验：如何简单安装MySQL数据库

    2009-01-04 12:58:00

  • Pandas读取并修改excel的示例代码

    2022-08-18 23:27:34

  • Python的动态重新封装的教程

    2023-08-23 15:26:39

  • Python开发之利用re模块去除代码块注释

    2022-08-26 22:11:59
    • asp之家 网络编程 m.aspxhome.com