js简单的分页器插件代码实例
程序员文章站
2022-05-07 09:54:05
这篇文章主要介绍了js简单的分页器插件代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
自己引入jquery插件...
这篇文章主要介绍了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。