<!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. Docker学习之——Node.js+MongoDB+Nginx环境搭建（一）

    最近在学习Node.js相关知识,在环境搭建上耗费了不少功夫,故此把这个过程写下来同大家分享一下,今天我先来介绍一下Docker,有很多人都写过相关知识,还有一些教程,在此我只想写一下,我的学习过程中 ...

  2. 怎样将M4A音频格式转换成MP3格式

    因为MP3音频格式应用的广泛性,所以很多时候我们都需要将不同的音频格式转换成MP3格式的,那么如果我们需要将M4A音频格式转换成MP3格式,我们应该怎样进行实现呢?下面我们就一起来看一下吧. 操作步骤 ...

  3. AppSettings操作类

    using System; using System.Collections.Generic; using System.Configuration; using System.Linq; using ...

  4. ASP.NET Core 的Windows和IIS宿主(自动翻译记录)

    https://docs.microsoft.com/en-us/aspnet/core/publishing/iis?tabs=aspnetcore2x 支持的操作系统 以下操作系统的支持: Win ...

  5. cvLogPolar函数详解

    对于二维图形,Log-polar转换表示从笛卡尔坐标到极坐标的变化,广泛应用在计算机视觉中.此函数模仿人类视网膜中央凹视力,并且对于目标跟踪等可用于快速尺度和旋转变换不变模板匹配. 本例程实现极坐标变 ...

  6. ubuntu系统中java -version所显示的版本与/etc/profile中配置的$JAVA_HOME的关系

    问题产生 ubuntu 18.04环境下,执行 java -version 发现与/etc/profile中的$JAVA_HOME所设置的java版本不同. 推测原因 最近用apt install 安 ...

  7. JavaScript面向对象之创建类和方法

    一,js使用函数来定义类而不是像别的编程语言一样通过关键字class来定义,通过类本身(this)和原型(prototype)来完成面对对象编程! 示例1, //创建ElectronicSignatu ...

  8. [redhat][centos] 让不同小版本的CentOS7使用相同的内核版本

    背景: CentOS7有定期的小版本发布,即官网释出的ISO,是带着小版本号的.CentOS7可以使用平滑升级,从这些小版本号中升上去. 但是并不是每一次的更新,都在释出的ISO中,这样的话,一台既有 ...

  9. 20165336 实验一 Java开发环境的熟悉

    20165336 实验一 Java开发环境的熟悉 一.实验报告封面 课程:Java程序设计 班级:1653班 姓名:康志强 学号:20165336 指导教师:娄嘉鹏 实验日期:2018年4月2日 实验 ...

  10. 理解Python的双下划线命名（转）

    add by zhj:今天在学习SimpleHTTPServer的源代码时,看到了Python标准库SocketServer模块中有个BaseServer类,该类的__init__方法定义如下 def ...