原生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实现的, ...
随机推荐
- 关于Cocos2d-x-3.16的开发环境搭建
一.需要安装的软件 1.VS2013或者VS2015 2.Cocos:cocos2d-x-3.16:http://www.cocos.com/download 3.Python:python-2.7. ...
- Thinkphp5.1 模板路径报错
版本:5.1.24 ,windows环境 报错: 模板文件不存在:template\index\default\index\index.html 1.报错原因:linux/windows 对大 ...
- Mock an function to modify partial return value by special arguments on Python
Mock an function to modify partial return value by special arguments on Python python mock一个带参数的方法,修 ...
- 三维计算机视觉 —— 中层次视觉 —— RCNN Family
RCNN是从图像中检测物体位置的方法,严格来讲不属于三维计算机视觉.但是这种方法却又非常非常重要,对三维物体的检测非常有启发,所以在这里做个总结. 1.RCNN - the original idea ...
- Cookiecutter: 更好的项目模板工具：（1）简介及可用资源汇总
原文档地址:https://cookiecutter.readthedocs.io/en/latest/ 本系列只介绍cookiecutter的基础使用,而且会删除与功能使用无关的部分.深度使用及了解 ...
- spring boot中的jave注解学习
在spring中,不仅框架作者会使用java注解,开发者也常使用. 可以随手给个例子:在org.springframework.boot.autoconfigure.jdbc.DataSourcePr ...
- python中的张量运算（tensor）
1,首先比较二者的参数部分:这就是处理0阶张量和1阶张量的区别 np.max:(a, axis=None, out=None, keepdims=False) 求序列的最值 最少接收一个参数 axis ...
- error_match问题
当nginx的sendfile处于on的情况下,在docker的环境下修改js文件会出现error_match的问题,应该要在nginx的配置中把sendfile设为off
- laravel安装一直报错
laravel安装一直报错 原因: 1.找到php版本是否对应 2.缺少第三方扩展库vendor 需要composer update 解决链接:https://learnku.com/docs/lar ...
- 浏览器(或客户端)触发，后台运行php脚本
既我从浏览器这端触发服务器上的php脚本,要想让服务器端的php脚本一直执行,我得把该网页一直开着,这样就达不到我不开电脑不开网页进行爬取的目的,因此查找了些资料,得知 ignore_user_abo ...