原生js实现分页效果（带实例）
小小插件（静态分页）
效果图：
首先实现简单功能：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">
<title> pager demo </title>
<meta name="author" content="rainna" />
<meta name="keywords" content="rainna's js lib" />
<meta name="description" content="pager demo" />
</head>
<style>
.j-curr{
color:red;
}
#pager{
width:400px;
margin:50px auto;
text-align:center;
line-height:26px;
}
#pager li{
display:inline-block;
padding:0 5px;
cursor:pointer;
}
</style>
<body>
<div id="list">
<figure>sjfejkgnvkn</figure>
<figure>0222222</figure>
<figure>块</figure>
<figure>了</figure>
<figure>是</figure>
<figure>0666666</figure>
<figure>0777777</figure>
<figure>0888888</figure>
<figure>我</figure>
<figure>10101010</figure>
<figure>11111111</figure>
<figure>12121212</figure>
<figure>13131313</figure>
<figure>14141414</figure>
<figure>15151515</figure>
<figure>16161616</figure>
<figure>17171717</figure>
<figure>18181818</figure>
<figure>19191919</figure>
<figure>20202020</figure>
<figure>01111111</figure>
<figure>0222222</figure>
<figure>0333333</figure>
<figure>0444444</figure>
<figure>0555555</figure>
</div>
<div id="pager"></div> <script>
var pager = function(){
//公共函数
function T$(id){
return document.getElementById(id);
}
function T$$(root,tag){
return (root || document).getElementsByTagName(tag);
}
function $extend(object1,object2){
for(var p in object2){
object1[p] = object2[p];
}
return object1;
}
function $each(arr, callback, thisp) {
if (arr.forEach){
arr.forEach(callback, thisp);
}else{
for(var i = 0, len = arr.length; i < len; i++){
callback.call(thisp, arr[i], i, arr);
}
}
} //默认参数配置
var defaultOptions = {
elemShowCount:5, //每页显示条数，默认为5条
pageShowCount:4, //显示的页码数目，默认显示4个页码
showFirstPageBtnAndLastPageBtn:true, //是否显示首页，尾页，默认显示
showPrevBtnAndNextBtn:true, //是否显示上一页，下一页，默认显示
showPageNumTips:true, //是否显示【1/7页】页面提示，默认显示
showPageNum:true //是否显示分页的数字，默认显示
}; //主类构造函数 参数说明：bid为元素容器div的ID,pid为分页容器div的ID,options为重写的默认配置参数
var showPage = function(bid,pid,options){
var self = this;
if(!(self instanceof showPage)){
return new showPage(bid,pid,options);
}
self.container = T$(bid); //元素容器div
self.pagerBox = T$(pid); //翻页容器div
if(!self.container){
return;
}
self.options = $extend(defaultOptions,options||{});
self.elem = T$$(self.container,'figure'); //需要分页的元素
self.elemTotalCount = self.elem.length || 0; //分页元素的总个数
self.pageTotalCount = Math.ceil(self.elemTotalCount/self.options.elemShowCount) || 0; //总页数
}; showPage.prototype = {
constructor:showPage,
//显示当页的元素内容，参数currPageNum为当前页码，从0开始
showChangeElemCont: function(currPageNum){
var self = this; //this为showPage对象
var nextPageCount = (currPageNum+1)*self.options.elemShowCount < self.elemTotalCount ? (currPageNum+1)*self.options.elemShowCount : self.elemTotalCount; //判断为最后一页时，最后一页应该显示的数据条数
for(var i=0;i<self.elemTotalCount;i++){
self.elem[i].style.display = 'none';
}
for(var i=currPageNum*self.options.elemShowCount,l=nextPageCount;i<l;i++){
self.elem[i].style.display = 'block';
}
},
//显示当页的页码内容，参数currPageNum为当前页码，从0开始
showChangePageCont: function(currPageNum){
var self = this; //this为showPage对象
var firstPageHtml = prevPageHtml = pageLinkHtml = nextPageHtml = lastPageHtml = pageTips = ''; //firstPageHtml:首页 prevPageHtml:上一页 pageLinkHtml:页码表 nextPageHtml:下一页 lastPageHtml:尾页 pageTips:页码提示
var startPage,endPage; //startPage:页码列表中的第一页 endPage:页码列表中的最后一页
var pageShowMidCount = Math.ceil(self.options.pageShowCount/2); //页码中间值，当超过这个值时，页码列表发生变化
if(self.pageTotalCount <= self.options.pageShowCount){ //总页码数小于等于默认要显示的页码数时，直接在当前页面显示全部的页码
startPage = 0;
endPage = self.pageTotalCount-1;
}else{
if(self.options.pageShowCount%2 == 0){
if((currPageNum + 1 - pageShowMidCount) <= 0){ //首页
startPage = 0;
endPage = self.options.pageShowCount-1;
}else if((currPageNum + 1 + pageShowMidCount) >= self.pageTotalCount){ //尾页
startPage = self.pageTotalCount-1 - self.options.pageShowCount + 1;
endPage = self.pageTotalCount-1;
}else{
startPage = currPageNum - pageShowMidCount + 1;
endPage = currPageNum + pageShowMidCount;
}
}else{
if((currPageNum + 1 - pageShowMidCount) <= 0){ //首页
startPage = 0;
endPage = self.options.pageShowCount-1;
}else if((currPageNum + 1 + pageShowMidCount - 1) >= self.pageTotalCount){ //尾页
startPage = self.pageTotalCount-1 - self.options.pageShowCount + 1;
endPage = self.pageTotalCount-1;
}else{
startPage = currPageNum - pageShowMidCount + 1;
endPage = currPageNum + pageShowMidCount - 1;
}
}
} //显示首页尾页
if(self.options.showFirstPageBtnAndLastPageBtn == true){
firstPageHtml = '<li>首页</li>';
lastPageHtml = '<li>尾页</li>';
}
//显示上一页下一页
if(self.options.showPrevBtnAndNextBtn == true){
if(currPageNum != 0) prevPageHtml = '<li>上一页</li>'; //首页不显示上一页
if(currPageNum != self.pageTotalCount-1) nextPageHtml = '<li>下一页</li>'; //尾页不显示最后一页
}
//显示页码数字链接
for(var i=startPage,l=endPage;i<=l;i++){
if(currPageNum==i){
pageLinkHtml += '<li class="j-curr">' + (i+1) + '</li>';
}else{
pageLinkHtml += '<li>' + (i+1) + '</li>';
}
}
//显示页码提示信息
if(self.options.showPageNumTips == true){
pageTips = '<span>' +(currPageNum+1) + '/' + self.pageTotalCount + '</span>';
}
//拼出页码元素的整体内容
self.pagerBox.innerHTML = firstPageHtml + prevPageHtml + pageLinkHtml + nextPageHtml + lastPageHtml + pageTips; var elems = T$$(self.pagerBox,'li');
$each(elems, function(o, i) {
o.onclick = function() {
if(o.innerText == '首页'){
self.showChangeElemCont(0);
self.showChangePageCont(0);
}else if(o.innerText == '尾页'){
self.showChangeElemCont(self.pageTotalCount-1);
self.showChangePageCont(self.pageTotalCount-1);
}else if(o.innerText == '上一页'){
self.showChangeElemCont(currPageNum-1);
self.showChangePageCont(currPageNum-1);
}else if(o.innerText == '下一页'){
self.showChangeElemCont(currPageNum+1);
self.showChangePageCont(currPageNum+1);
}else{
index = parseInt(o.innerText) - 1;
self.showChangeElemCont(index);
self.showChangePageCont(index);
}
}
});
}
}; return{
onShowPage:function(bid,pid,options){
//调用主类
var st = new showPage(bid,pid,options);
st.showChangeElemCont(0);
st.showChangePageCont(0);
}
}
}(); pager.onShowPage('list','pager',{elemShowCount:4,pageShowCount:5});
</script>
</body>
</html>
然后填充内容和样式：(修改css和js以及html)
实例：
css:
#pager {
margin:50px auto;
text-align:center;
line-height:26px;
}
#pager li {
display:inline-block;
min-width: 40px;
height: 40px;
line-height: 40px;
margin: 5px;
cursor:pointer;
color: #999;
background-color: #fff;
border: 1px solid #f6f6f6;
}
#pager span {
color: #999;
margin-left: 5px;
}
.j-curr{
color:#fff !important;
background-color: #16ab95 !important;
}
.messageMain {
background-color: #fff;
padding: 20px 0;
display: flex;
flex-wrap: wrap;
}
figure {
overflow: hidden;
width: 360px;
font-size: 14px;
color: #333;
position: relative;
margin: 0 20px 20px;
}
figure img {
width: 150px;
height: 100px;
float: left;
margin-right: 18px;
}
figcaption {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp:;
overflow: hidden;
margin-top: 2px;
}
figcaption {
float: left;
width: 192px;
color: #333;
}
figcaption:hover {
color: #16ab95;
/* cursor:pointer;*/
}
figure>span {
position: absolute;
left: 168px;
bottom: 2px;
color: #999;
}
js:
var pager = function(){
//公共函数
function T$(id){
return document.getElementById(id);
}
function T$$(root,tag){
return (root || document).getElementsByTagName(tag);
}
function $extend(object1,object2){
for(var p in object2){
object1[p] = object2[p];
}
return object1;
}
function $each(arr, callback, thisp) {
if (arr.forEach){
arr.forEach(callback, thisp);
}else{
for(var i = 0, len = arr.length; i < len; i++){
callback.call(thisp, arr[i], i, arr);
}
}
}
//默认参数配置
var defaultOptions = {
elemShowCount:5, //每页显示条数，默认为5条
pageShowCount:4, //显示的页码数目，默认显示4个页码
showFirstPageBtnAndLastPageBtn:true, //是否显示首页，尾页，默认显示
showPrevBtnAndNextBtn:true, //是否显示上一页，下一页，默认显示
showPageNumTips:true, //是否显示【1/7页】页面提示，默认显示
showPageNum:true //是否显示分页的数字，默认显示
};
//主类构造函数 参数说明：bid为元素容器div的ID,pid为分页容器div的ID,options为重写的默认配置参数
var showPage = function(bid,pid,options){
var self = this;
if(!(self instanceof showPage)){
return new showPage(bid,pid,options);
}
self.container = T$(bid); //元素容器div
self.pagerBox = T$(pid); //翻页容器div
if(!self.container){
return;
}
self.options = $extend(defaultOptions,options||{});
self.elem = T$$(self.container,'figure'); //需要分页的元素
self.elemTotalCount = self.elem.length || 0; //分页元素的总个数
self.pageTotalCount = Math.ceil(self.elemTotalCount/self.options.elemShowCount) || 0; //总页数
};
showPage.prototype = {
constructor:showPage,
//显示当页的元素内容，参数currPageNum为当前页码，从0开始
showChangeElemCont: function(currPageNum){
var self = this; //this为showPage对象
var nextPageCount = (currPageNum+1)*self.options.elemShowCount < self.elemTotalCount ? (currPageNum+1)*self.options.elemShowCount : self.elemTotalCount; //判断为最后一页时，最后一页应该显示的数据条数
for(var i=0;i<self.elemTotalCount;i++){
self.elem[i].style.display = 'none';
}
for(var i=currPageNum*self.options.elemShowCount,l=nextPageCount;i<l;i++){
self.elem[i].style.display = 'block';
}
},
//显示当页的页码内容，参数currPageNum为当前页码，从0开始
showChangePageCont: function(currPageNum){
var self = this; //this为showPage对象
var firstPageHtml = prevPageHtml = pageLinkHtml = nextPageHtml = lastPageHtml = pageTips = ''; //firstPageHtml:首页 prevPageHtml:上一页 pageLinkHtml:页码表 nextPageHtml:下一页 lastPageHtml:尾页 pageTips:页码提示
var startPage,endPage; //startPage:页码列表中的第一页 endPage:页码列表中的最后一页
var pageShowMidCount = Math.ceil(self.options.pageShowCount/2); //页码中间值，当超过这个值时，页码列表发生变化
if(self.pageTotalCount <= self.options.pageShowCount){ //总页码数小于等于默认要显示的页码数时，直接在当前页面显示全部的页码
startPage = 0;
endPage = self.pageTotalCount-1;
}else{
if(self.options.pageShowCount%2 == 0){
if((currPageNum + 1 - pageShowMidCount) <= 0){ //首页
startPage = 0;
endPage = self.options.pageShowCount-1;
}else if((currPageNum + 1 + pageShowMidCount) >= self.pageTotalCount){ //尾页
startPage = self.pageTotalCount-1 - self.options.pageShowCount + 1;
endPage = self.pageTotalCount-1;
}else{
startPage = currPageNum - pageShowMidCount + 1;
endPage = currPageNum + pageShowMidCount;
}
}else{
if((currPageNum + 1 - pageShowMidCount) <= 0){ //首页
startPage = 0;
endPage = self.options.pageShowCount-1;
}else if((currPageNum + 1 + pageShowMidCount - 1) >= self.pageTotalCount){ //尾页
startPage = self.pageTotalCount-1 - self.options.pageShowCount + 1;
endPage = self.pageTotalCount-1;
}else{
startPage = currPageNum - pageShowMidCount + 1;
endPage = currPageNum + pageShowMidCount - 1;
}
}
}
//显示首页尾页
if(self.options.showFirstPageBtnAndLastPageBtn == true){
firstPageHtml = '<li>首页</li>';
lastPageHtml = '<li>尾页</li>';
}
//显示上一页下一页
if(self.options.showPrevBtnAndNextBtn == true){
if(currPageNum != 0) prevPageHtml = '<li><</li>'; //首页不显示上一页
if(currPageNum != self.pageTotalCount-1) nextPageHtml = '<li>></li>'; //尾页不显示最后一页
}
//显示页码数字链接
for(var i=startPage,l=endPage;i<=l;i++){
if(currPageNum==i){
pageLinkHtml += '<li class="j-curr">' + (i+1) + '</li>';
}else{
pageLinkHtml += '<li>' + (i+1) + '</li>';
}
}
//显示页码提示信息
if(self.options.showPageNumTips == true){
pageTips = '<span>' +(currPageNum+1) + '/' + self.pageTotalCount + '</span>';
}
//拼出页码元素的整体内容
self.pagerBox.innerHTML = firstPageHtml + prevPageHtml + pageLinkHtml + nextPageHtml + lastPageHtml + pageTips;
var elems = T$$(self.pagerBox,'li');
$each(elems, function(o, i) {
o.onclick = function() {
if(o.innerText == '首页'){
self.showChangeElemCont(0);
self.showChangePageCont(0);
}else if(o.innerText == '尾页'){
self.showChangeElemCont(self.pageTotalCount-1);
self.showChangePageCont(self.pageTotalCount-1);
}else if(o.innerText == '<'){
self.showChangeElemCont(currPageNum-1);
self.showChangePageCont(currPageNum-1);
}else if(o.innerText == '>'){
self.showChangeElemCont(currPageNum+1);
self.showChangePageCont(currPageNum+1);
}else{
index = parseInt(o.innerText) - 1;
self.showChangeElemCont(index);
self.showChangePageCont(index);
}
}
});
}
};
return{
onShowPage:function(bid,pid,options){
//调用主类
var st = new showPage(bid,pid,options);
st.showChangeElemCont(0);
st.showChangePageCont(0);
}
}
}();
pager.onShowPage('list','pager',{elemShowCount:8,pageShowCount:5});
html:
<!-- 分页 -->
<div class="messageMain" id="list">
<figure>
<a href="#"><img src="img/education.png" alt=""></a>
<a href="#"><figcaption>1发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a>
<span>2018/07/17</span>
</figure>
<figure>
<a href="#"><img src="img/education.png" alt=""></a>
<a href="#"><figcaption>2发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a>
<span>2018/07/17</span>
</figure>
<figure>
<a href="#"><img src="img/education.png" alt=""></a>
<a href="#"><figcaption>3发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a>
<span>2018/07/17</span>
</figure>
<figure>
<a href="#"><img src="img/education.png" alt=""></a>
<a href="#"><figcaption>4发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a>
<span>2018/07/17</span>
</figure>
<figure>
<a href="#"><img src="img/education.png" alt=""></a>
<a href="#"><figcaption>5发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a>
<span>2018/07/17</span>
</figure>
<figure>
<a href="#"><img src="img/education.png" alt=""></a>
<a href="#"><figcaption>6发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a>
<span>2018/07/17</span>
</figure>
<figure>
<a href="#"><img src="img/education.png" alt=""></a>
<a href="#"><figcaption>7发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a>
<span>2018/07/17</span>
</figure>
<figure>
<a href="#"><img src="img/education.png" alt=""></a>
<a href="#"><figcaption>8发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a>
<span>2018/07/17</span>
</figure>
<figure>
<a href="#"><img src="img/education.png" alt=""></a>
<a href="#"><figcaption>9发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a>
<span>2018/07/17</span>
</figure>
<figure>
<a href="#"><img src="img/education.png" alt=""></a>
<a href="#"><figcaption>10发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a>
<span>2018/07/17</span>
</figure>
<figure>
<a href="#"><img src="img/education.png" alt=""></a>
<a href="#"><figcaption>11发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a>
<span>2018/07/17</span>
</figure>
<figure>
<a href="#"><img src="img/education.png" alt=""></a>
<a href="#"><figcaption>12发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a>
<span>2018/07/17</span>
</figure>
<figure>
<a href="#"><img src="img/education.png" alt=""></a>
<a href="#"><figcaption>13发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a>
<span>2018/07/17</span>
</figure>
<figure>
<a href="#"><img src="img/education.png" alt=""></a>
<a href="#"><figcaption>1发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a>
<span>2018/07/17</span>
</figure>
<figure>
<a href="#"><img src="img/education.png" alt=""></a>
<a href="#"><figcaption>2发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a>
<span>2018/07/17</span>
</figure>
<figure>
<a href="#"><img src="img/education.png" alt=""></a>
<a href="#"><figcaption>3发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a>
<span>2018/07/17</span>
</figure>
<figure>
<a href="#"><img src="img/education.png" alt=""></a>
<a href="#"><figcaption>4发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a>
<span>2018/07/17</span>
</figure>
<figure>
<a href="#"><img src="img/education.png" alt=""></a>
<a href="#"><figcaption>5发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a>
<span>2018/07/17</span>
</figure>
<figure>
<a href="#"><img src="img/education.png" alt=""></a>
<a href="#"><figcaption>6发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a>
<span>2018/07/17</span>
</figure>
<figure>
<a href="#"><img src="img/education.png" alt=""></a>
<a href="#"><figcaption>7发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a>
<span>2018/07/17</span>
</figure>
<figure>
<a href="#"><img src="img/education.png" alt=""></a>
<a href="#"><figcaption>8发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a>
<span>2018/07/17</span>
</figure>
<figure>
<a href="#"><img src="img/education.png" alt=""></a>
<a href="#"><figcaption>9发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a>
<span>2018/07/17</span>
</figure>
<figure>
<a href="#"><img src="img/education.png" alt=""></a>
<a href="#"><figcaption>10发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a>
<span>2018/07/17</span>
</figure>
<figure>
<a href="#"><img src="img/education.png" alt=""></a>
<a href="#"><figcaption>11发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a>
<span>2018/07/17</span>
</figure>
<figure>
<a href="#"><img src="img/education.png" alt=""></a>
<a href="#"><figcaption>12发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a>
<span>2018/07/17</span>
</figure>
<figure>
<a href="#"><img src="img/education.png" alt=""></a>
<a href="#"><figcaption>13发发开发商吗，深几十年肯康女士阿卡离开了奶粉加肯几女少女那么，咱女生出妈问你抚摸着你奥斯卡未付款没怎么VM爱我就看我看起来我可免费期望尽快打款吗</figcaption></a>
<span>2018/07/17</span>
</figure>
</div>
<div id="pager"></div>
原生js实现分页效果（带实例）的更多相关文章
- 原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）
虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...
- 原生JS实现分页效果1.0
不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...
- 原生js显示分页效果
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- 原生JS实现弹幕效果
纯属无聊写的,可能有很多问题,欢迎批评指教. 效果图:图一是预设的一些弹幕,图二是自己发射的弹幕,效果是一样的. 首先是弹幕的位置,是要从最右滑到最左,为了防止随机高度弹幕会覆盖的问题,设置了通道 ...
- 原生js版分页插件
之前我在自己的博客里发表了一篇用angularJs自定义指令实现的分页插件,今天简单改造了一下,改成了原生JavaScript版本的分页插件,可以自定义一些简单配置,特此记录下来.如有不足之处,欢迎指 ...
- 原生 js 写分页
欢迎留言或者加本人QQ172360937咨询 这段代码是用原生 js 写的一个分页的效果 <!doctype html> <html lang="en"> ...
- 纯原生javascript实现分页效果
随着近几年前端行业的迅猛发展,各种层出不穷的新框架,新方法让我们有点眼花缭乱. 最近刚好比较清闲,所以没事准备撸撸前端的根基javascript,纯属练练手,写个分页,顺便跟大家分享一下 functi ...
- 原生JS实现"旋转木马"效果的图片轮播插件
一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...
随机推荐
- spring gateway 截取response 长度缺失
网上找到一段获取修改response的代码:https://blog.csdn.net/tianyaleixiaowu/article/details/83618037 代码如下: import or ...
- js 零散知识总结
网页播放声音 这个非常简单,我们只需要在html和js设置即可.首先看html代码 html代码 <audio id="sound" autoplay="autop ...
- Unity长连接
http://blog.csdn.net/claine/article/details/52374546
- 【Static Program Analysis - Chapter 1】 Introduction
Regarding correctness, programmers routinely use testing to gain confidence that their programs work ...
- LeetCode - 767. Reorganize String
Given a string S, check if the letters can be rearranged so that two characters that are adjacent to ...
- ssh: connect to host xx.xx.xxx.xxx port 22: Connection refused
执行 ssh root@47.94.142.215 报错 首先要开启ssh 系统偏好设置-共享 选上远程登陆 选上远程管理 检测openssh-server是否安装成功 ,安装成功的如下 ps -e ...
- pandas功能使用rename, reindex, set_index 详解
pandas rename 功能 在使用 pandas 的过程中经常会用到修改列名称的问题,会用到 rename 或者 reindex 等功能,每次都需要去查文档 当然经常也可以使用 df.colum ...
- update条件判断更新
UPDATE cw_party tp, cw_shop tsSET tp.state = 3, ts.bonus_average = CASEWHEN ts.bonus_average > 0 ...
- js 画布与图片的相互转化(canvas与img)
使用js将图片拷贝进画布 //将图片对象转化为画布,返回画布function ImageToCanvas(image) { var canvas = document.createElement(&q ...
- mybits根据表自动生成 java类和mapper 文件
mybits根据表自动生成 java类和mapper 文件 我这个脑子啊,每次创建新的工程都会忘记是怎么集成mybits怎么生成mapper文件的,so today , I can't write t ...