<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title></title>

		<style type="text/css">

* {

  padding: 0;

  margin: 0;

}

li {

  list-style: none;

}

div.paging {

  position: absolute;

  bottom: 50px;

  left: 50%;

  margin-left: -200px;

  height: 28px;

  width: 400px;

}

div.paging > span {

  display: block;

  width: 26px;

  height: 26px;

  border: 1px solid #999;

  cursor: pointer;

  float: left;

}

div.paging span.prev {

  margin-right: 4px;

  background: url(../img/prevbtn.png) center no-repeat;

}

div.paging span.next {

  margin-left: 4px;

  background: url(../img/nextbtn.png) center no-repeat;

}

div.paging div.page-btn {

  width: 180px;

  height: 28px;

  overflow: hidden;

  float: left;

  position: relative;

}

div.paging div.page-btn ul {

  width: 1000px;

  height: 28px;

  position: absolute;

  left: 0;

  top: 0;

}

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.paging div.page-btn ul li.active {

  border-bottom: 2px solid #9ACD32;

}

		</style>

	</head>

	<body>

		<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>

	</body>

	<script type="text/javascript" src="js/jquery.js" ></script>

	<script type="text/javascript">

		$(function(){

/*

   wrap:最外层的dom

   prev：上一页的按钮

   next：下一页的按钮

   btnWrap:分页器的页数的外层dom,注意：这个dom不包含prev和next

   btnBox：每个分页点的dom外层

   btn:分页点的dom

   showBtn：展示个数，默认为3个

 * */

createPage({

	wrap:'.paging',

	prev:'.prev',

	next:'.next',

	btnWrap:'.page-btn',

	btnBox:'.btn-list',

	btn:'li',

	showBtn:4,

	callback:function(num){

	 	console.log(num);

	}

});

function createPage(option){

   	  var fn  = {};

   	  var $wrap  =$(option.wrap),

   	     $prev = $wrap.find(option.prev),

   	     $next = $wrap.find(option.next),

   	     $btnWrap = $wrap.find(option.btnBox),

   	     $btnList = $btnWrap.find(option.btn),

   	     currActive = 0,

   	     prevActive = 0,

   	     maxLen = $btnList.length,

   	     showBtn = option.showBtn || 3,

   	     btnWidth = $btnList.outerWidth(),

   	     currLeft = 0;

 		//调节宽度

   	  	$wrap.find(option.btnWrap).css("width",showBtn*btnWidth);

   	 	//绑定上一个事件

   	  	$prev.on("click",function(){

  			currActive--;

  			if(currActive < 0){

  				currActive = maxLen-1;

  			}

  			fn.changed(currActive);

   	  	});

   	 //绑定下一个事件

   	  	$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");

   	  	if(option.callback){

   	  		option.callback($btnList.eq(index).html());

   	  	}

   	  	prevActive = index;

   	  };

		//项目绑定

   	  	$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分页器插件的更多相关文章

  1. 原生js分页器插件

    window.page = function page(ele, para) { this.ele = document.querySelector(ele); this.options = { co ...

  2. Sublime Text 2 JS 格式化插件 JsFormat的配置使用

    (转自http://www.jb51.net/softjc/178401.html) 这里下载这插件包 https://github.com/jdc0589/JsFormat ,点油下角的zip就能下 ...

  3. Django 的css和js压缩插件：django_compressor

    今天尝试了django_conpressor,一个在django框架中压缩css和js的插件,灰常有用 我把它加载在我的base的HTML template中,原来未经压缩的css和js是: < ...

  4. knob.js进度插件

    关于knob.js进度插件的使用 关于这个插件,妹的,第一次使用坑死爹了,各种不会,幸亏我有持之以恒的精神,最终还是让其臣服于我的胯下.... 1.  引入 head  部分添加knob.js,同时引 ...

  5. Sublime Text 2 JS 格式化插件 JsFormat

    这里下载这插件包 https://github.com/jdc0589/JsFormat ,点油下角的zip就能下载插件包放到sublime安装目录的DataPackages目录中重新打开sublim ...

  6. Notyf - 超级简单、响应式的 JS 通知插件

    通知是网站的常用功能之一,可以用来显示消息.通告.提示等等.Notyf 是一款超级简单.响应式的 JS 通知插件,不依赖 jQuery 库,可以独立使用.赶紧试用一下吧! 在线演示      免费下载 ...

  7. js开关插件使用

    一.简介 本篇文章介绍一个比较好使用的js开关插件Switchery,该插件的样式是ios7的滑动按钮插件,并且将很多功能加入到配置项,简单.灵活,支持的绝大部分浏览器(Chrome, Firefox ...

  8. js写插件教程深入

    原文地址:https://github.com/lianxiaozhuang/blog 转载请注明出处 js 写插件教程深入 1.介绍具有安全作用域的构造函数 function Fn(name){ t ...

  9. move.js运动插件

    move.js 运动插件是一款针对元素动画效果的插件.可以运用此插件制作出各类元素效果. 插件GitHub地址:https://github.com/visionmedia/move.js 下面整理学 ...

随机推荐

  1. vbox 的 ova 提取vmdk 与 vdi 以及扩容

    原文: http://blog.csdn.net/flm2003/article/details/11980863 1. 从ova提取vmdk: tar xvf oldImage.ova => ...

  2. ls --help 常用命令

    $ ls --help Usage: ls [OPTION]... [FILE]... List information about the FILEs (the current directory ...

  3. 面向对象。OOP三大特征：封装，继承，多态。 这个讲的是【封存】

    class Ren { private $name; private $sex; private $age; //年龄必须在18-50之间 function __constuct($v) { $thi ...

  4. tensorflow 的tf.where详解

    最近在用到数据筛选,观看代码中有tf.where()的用法,不是很常用,也不是很好理解.在这里记录一下 tf.where( condition, x=None, y=None, name=None ) ...

  5. sess.run(tf.global_variables_initializer()) 做了什么？

    当我们训练自己的神经网络的时候,无一例外的就是都会加上一句 sess.run(tf.global_variables_initializer()) ,这行代码的官方解释是 初始化模型的参数.那么,它到 ...

  6. EM学习-思想和代码

    EM算法的简明实现 当然是教学用的简明实现了,这份实现是针对双硬币模型的. 双硬币模型 假设有两枚硬币A.B,以相同的概率随机选择一个硬币,进行如下的抛硬币实验:共做5次实验,每次实验独立的抛十次,结 ...

  7. linux使用rz、sz快速上传、下载文件

    平时都使用ftp工具进行文件的上传下载操作,针对于小文件的简单传输来说,有下面好的方法: 首先安装rz.sz工具: #yum install lrzsz 上传文件:rz 下载文件:sz 上传文件在sh ...

  8. LeetCode 566 Reshape the Matrix 解题报告

    题目要求 In MATLAB, there is a very useful function called 'reshape', which can reshape a matrix into a ...

  9. mysql的增删改查

    1.启动 Navicat for MySQL, 在 MySQL – 新建连接中完成连接参数配置.2.登录到本地数据库服务器后, 连接到 test 数据库上.3.用 Create Table 建立 St ...

  10. 集合求交集 & 去除列表中重复的元素

    集合求交集: set1 = {1,2,3,4,5} set2 = {4,5,6,7,8} 交集:set3 = set1 & set2 print(ste3) #结果为{4,5} 或者ste1. ...