当前位置： 移动技术网 > IT编程>开发语言>JavaScript > js简单的分页器插件代码实例

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

2019年09月16日  | 移动技术网IT编程  | 我要评论

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

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

代码如下

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网