这篇文章主要介绍了js简单的分页器插件代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
自己引入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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
© 版权声明
THE END
暂无评论内容