代码改变世界

js 简易的分页器插件

2016-12-29 14:30  muamaker  阅读(398)  评论(0)  编辑  收藏  举报

1.自己引入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>