js 简易的分页器插件

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>

js 简易的分页器插件的更多相关文章

web简易MP3播放插件 Aplayer篇章一
效果如图所示: 写入初始代码,定义一个id唯一的div player1 <!DOCTYPE html> <html> <head> <meta charset ...
marked.js简易手册
marked.js简易手册本文介绍的是marked.js.秉持"来之即用"的原则,对它进行简要的翻译和归纳, 安装在网上引用或者是引用本地文件即可.要么就用命令行: npm i ...
js简易日历
js简易日历中设计的知识点:选项卡切换数组 innerHTML 连接符与选项卡的区别:div的个数不同连接符中需要注意的:(优先级) "abc"+12+3+&qu ...
Jquery.validate.js表单验证插件的使用
作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...
Table Dragger - 简单的 JS 拖放排序表格插件
Table Dragger 是一个极简的实现拖放排序的表格插件,纯 JavaScript 库,不依赖 jQuery.用于构建操作方便的拖放排序功能,超级容易设置,有平滑的动画,支持触摸事件. 在线演示 ...
jQuery.validate.js表单验证插件
jQuery.validate.js表单验证插件的使用效果: 代码: <!DOCTYPE html> <html lang="en"> <head& ...
原生js封装十字参考线插件(一)
需求来源: 拓扑图之机房平面图,显示机房长宽比例尺,房间内标注各种设备间距不易实现,特在机房平面图上层加一个十字参考线横竖两条线垂直,在鼠标指针处交叉,显示鼠标指针坐标(相对机房平面图的坐标,不是相 ...
JS与jquery书写插件规范
什么是封装呢? 我的理解就是把一个功能单独做成一个组件,就像做饺子,以前做饺子必须自己先用面粉做饺子皮,再做饺子馅,然后再手工包饺子,但是现在人们发明了自动包饺子机器,虽然机器里面的每一步骤和你自己 ...
js插件---10个免费开源的JS音乐播放器插件
js插件---10个免费开源的JS音乐播放器插件一.总结一句话总结:各种插件都有很多,多去找. 二.js插件---10个免费开源的JS音乐播放器插件亲测可用音乐播放器在网页设计中有时候会用到, ...

随机推荐

netfilter的钩子——数据包在内核态得捕获、修改和转发
转发:http://blog.csdn.net/stonesharp/article/details/27091391 数据包在内核态得捕获.修改和转发(基于 netfilter) 忙活了好几天 ...
MVC 好记星不如烂笔头之 ---> 全局异常捕获以及ACTION捕获
public class BaseController : Controller { /// <summary> /// Called after the action method is ...
Ubuntu菜鸟入门（二）—— apt认知，且完善语言安装包
一语言安装包安装 1 原因虽然安装的中文版,但是由于安装包很小,所以汉化的不够完全,所以要安装后,再下载语言包进行安装 2 方法二 apt--软件包管理器 1 软件源 (1) 介绍 ...
openfoam 的安装【转载】
原文地址: http://blog.sina.com.cn/s/blog_14bf001d10102wifw.html OpenFOAM安装 OpenFOAM基于Linux系统下运行,由于对Linux ...
myeclipse2014
myeclipse 2014-GA offline 迅雷下载 http://downloads.myeclipseide.com/downloads/products/eworkbench/201 ...
Android入门（四）：链接接口组件和程序代码
编写好layout中的接口组件之后,下一步就是编写控制接口组件的程序代码.上一章,我们使用了三种接口组件,在使用者输入性别和年龄之后点击“健康建议按钮”,程序会读取用户所填入的性别和年龄,然后显示判断 ...
[转][Starling] 神器——原生Swf一键导出到Starling!
Swf一键导出到Starling中的工具,在Starling使用原生的MovieClip 来自:http://zmliu.github.io/2013/11/09/StarlingSwfTool/ 如 ...
【转】ACM博弈知识汇总
博弈知识汇总转自:http://www.cnblogs.com/kuangbin/archive/2011/08/28/2156426.html 有一种很有意思的游戏,就是有物体若干堆,可以是火柴棍 ...
Android四大组件--ContentProvider详解(转)
一.相关ContentProvider概念解析: 1.ContentProvider简介在Android官方指出的Android的数据存储方式总共有五种,分别是:Shared Preferences. ...
hihoCoder 1183 连通性一·割边与割点（Tarjan求割点与割边）
#1183 : 连通性一·割边与割点时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述还记得上次小Hi和小Ho学校被黑客攻击的事情么,那一次攻击最后造成了学校网络数据的丢 ...

js 简易的分页器插件

js 简易的分页器插件的更多相关文章

随机推荐

热门专题