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音乐播放器插件亲测可用音乐播放器在网页设计中有时候会用到, ...

随机推荐

Linux下的tmpfs文件系统(/dev/shm)
转自:http://www.2cto.com/os/201411/354888.html 介绍 /dev/shm/是一个使用就是tmpfs文件系统的设备,其实就是一个特殊的文件系统.redhat中默认 ...
学习微信小程序之css2
一:伪类的使用 .class-btn:active{ color: red;} <button class="class-btn">并集选择器</button&g ...
handler内存泄露
原因: 在Activity中新建一个Handler后,Handler执行计时操作,如果Activity销毁,Handler是不会主动销毁的,而且会占用Activity的空间,不使其回收,积累久了就会内 ...
IDE-Sublime【2】-代码智能提示插件SublimeCodeIntel的安装
一.打开菜单References -> Package Control 二.输入Package Control: install Package,回车三.输入SublimeCodeIntel, ...
[USACO] 铺放矩形块题解
题目大意: 给定4个矩形块,找出一个最小的封闭矩形将这4个矩形块放入,但不得相互重叠.所谓最小矩形指该矩形面积最小. 思路: 枚举矩形的安放顺序,再按照题目所给的图判断即可,主要要想到枚举. 代码: ...
【BZOJ】3930: [CQOI2015]选数
题意从区间\([L, R]\)选\(N\)个数(可以重复),问这\(N\)个数的最大公约数是\(K\)的方案数.(\(1 \le N, K \le 10^9, 1 \le L \le R \le 1 ...
ffplay代码播放pcm数据
摘抄雷兄 http://blog.csdn.net/leixiaohua1020/article/details/46890259 /** * 最简单的SDL2播放音频的例子(SDL2播放PCM) * ...
scrapy爬虫笔记(一)------环境配置
前言: 本系列文章是对爬虫的简单介绍,以及教你如何用简单的方法爬取网站上的内容. 需要阅读者对html语言及python语言有基本的了解. (本系列文章也是我在学习爬虫过程中的学习笔记,随着学习的深入 ...
JsonTest
以前用MVC写网站时并不用考虑Json的转换,MVC已经提供了现成的方法. 现在没有用MVC,我就在考虑如何自己转换Json,想来想去自己写还是不够完美,于是尝试了一些其他人写的方法,尝试过微软提供的 ...
使用MS Test进行单元测试
MS Test也可以方便的进行单元测试,可以通过Visual Studio很方便的建立单元测试. 添加对待测试工程的引用,即可方便的开始单元测试. 最基本的一些测试使用如下: using System ...

js 简易的分页器插件

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

随机推荐

热门专题