<!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. Windows 10 Install rabbitmq-server-3.6.9

    rabbitmq下载 http://www.rabbitmq.com/releases/rabbitmq-server/v3.6.9/rabbitmq-server-3.6.9.exe otp插件下载 ...

  2. PHP数组总结，，PHP面向对象思维思路。

    <?php //定义数组 $attr = array(); $attr[] = ; //索引数组 $attr = array(,,,); //关联数组 $attr = array("c ...

  3. 如何打jar包 学习笔记

    jar包是由.class文件压缩而成.要查看jar包中的内容,使用压缩工具 解压缩即可.也可以做修改,并重新打成jar包.总结一下最近学到的一些打jar包的方法: 一.DOS下使用jar命令 打jar ...

  4. [No000015D]【李笑来 笔记整理】个人商业模式升级

    提前知道地图对你到达目标是至关重要的. 比较女性与男性的成本:女性的成本更高(周期性激素分泌波动),所以不要再这个时候和女朋友较劲,她也是身不由己,当你知道这件事情之后,你就会试着去理解她. 下面这张 ...

  5. RabbitMQ 内存控制 硬盘控制

    RabbitMQ服务器在启动时以及abbitmqctl set_vm_memory_high_watermark fraction 执行时,会检查计算机的RAM总大小. 默认情况下下, 当 Rabbi ...

  6. SQL Server 2008 事件探查器（SQL SERVER Profiler）

    要想很好地优化ERP系统,可以从客户端.服务器.网络等入手,对于我们M1系统的优化来说,SQL 语句的优化就起到很重要的作用了.为此,我们展开,学习了SQL SERVER 2008的事件探查器(SQL ...

  7. 子分区 复合分区 Subpartitioning

    https://dev.mysql.com/doc/refman/8.0/en/partitioning-subpartitions.html

  8. C-Free 5 安装 [Error] G__~1.EXE: (x86)\C-FREE~1\mingw\mingw32\bin\: No such file or directory

    解决[Error] g++.exe: 5\mingw\include: No such file or directory - 陆总的博客 - CSDN博客 https://blog.csdn.net ...

  9. [Day4]Switch语句、数组、二维数组

    1.选择结构switch (1)格式 switch (表达式){ case 目标值1: 执行语句1; break; case 目标值2: 执行语句2; break; ．．．．．． case 目标值n: ...

  10. springboot 整合swagger-ui

    一.添加maven依赖 <dependency> <groupId>io.springfox</groupId> <artifactId>springf ...