快捷導(dǎo)航

js簡(jiǎn)單的分頁器插件代碼實(shí)例

更新時(shí)間：2019年09月11日 11:06:37 作者：muamaker

這篇文章主要介紹了js簡(jiǎn)單的分頁器插件代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

自己引入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:每頁內(nèi)容的wrap
 prev：上一頁的按鈕
 next：下一頁的按鈕
 btnWrap:分頁器的頁數(shù)的外層dom,注意：這個(gè)dom不包含prev和next
 btnBox：每個(gè)分頁點(diǎn)的dom外層
 btn:分頁點(diǎn)的dom
 showBtn：展示個(gè)數(shù)，默認(rèn)為3個(gè)
 * */

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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: