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

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

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

代码如下

 
  
  
  
* {
 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;
}

  
 
 
  
  
   
    

     
1
     

     

     

     

     

     

     
 
    
    

     
2
     

     

     

     

     

     

     
 
    
    

     
3
     

     

     

     

     

     

     
 
    
    

     
4
     

     

     

     

     

     

     
 
    
    

     
5
     

     

     

     

     

     

     
 
    
    

     
6
     

     

     

     

     

     

     
 
    
    

     
7
     

     

     

     

     

     

     
 
    
    

     
8
     

     

     

     

     

     

     
 
    
     
   
    
    
     

      
2016
      
2015
      
2014
      
2013
      
2012
      
2011
      
2010
      
2009
     
    
    
   
   
 
 
 

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