>插件描述：jPages是一个客户端分页插件，它比其他大多数插件多了很多功能，比如自动翻页，滚动浏览，显示延迟，完全可定制的导航面板也集成项目与Animate.css和延迟加载。
> 插件出处：http://www.jq22.com/jquery-info283
> http://luis-almeida.github.io/jPages/
1. 插入图文组件 并设置好*自定义class名称* 添加不少于能分页的图片数量
2. 插入代码组件
3. 添加以下基础代码[（注：将下面.自定义Class修改为图文的Class）]()
```
<!-- 分页DIV -->
<div class="holder">
</div>
<!--分页样式-->
<style>
.holder {
margin:15px 0;
text-align: center;
}
.holder a {
font-size:12px;
cursor:pointer;
margin:0 5px;
z-index: 2;
background-color: #fff;
border: 1px solid #ddd;padding: 6px 12px;
margin-left: -1px;
}
.holder a:hover {
background-color:#222;
color:#fff
}
.holder a.jp-previous {
margin-right:15px
}
.holder a.jp-next {
margin-left:15px
}
.holder a.jp-current, a.jp-current:hover {
z-index: 2;
color: #fff;
cursor: default;
background-color: #222;
border-color: #222;
}
.holder a.jp-disabled, a.jp-disabled:hover {
color:#bbb
}
.holder a.jp-current, a.jp-current:hover, .holder a.jp-disabled, a.jp-disabled:hover {
cursor:default;
}
.holder span {
margin:0 5px
}
</style>
<!--分页初始化方法-->
<script>
$(".自定义class ul").attr("id","itemContainer"); // 给图文组件添加ID
/* when document is ready */
$(function(){
/* initiate the plugin */
$("div.holder").jPages({
containerID : "itemContainer",
first: '首页',
last: '尾页',
previous: '上页',
next: '下页',
perPage: 6,// 每页显示几个图文
startPage: 1,
startRange: 2,
midRange: 3,
endRange: 2,
animation: 'flipInX',
keyBrowse: true,
callback : function( pages, items ){
/* lazy load current images */
items.showing.find("img").trigger("turnPage");
/* lazy load next page images */
items.oncoming.find("img").trigger("turnPage");
}
});
});
</script>
```
4. 插入第二个代码组件（JS核心文件）
```
<!--分页JS-->
<script > /**
* jQuery jPages v0.7
* Client side pagination with jQuery
* http://luis-almeida.github.com/jPages
*
* Licensed under the MIT license.
* Copyright 2012 Luís Almeida
* https://github.com/luis-almeida
*/
;(function($, window, document, undefined) {
var name = "jPages",
instance = null,
defaults = {
containerID: "",
first: false,
previous: "← previous",
next: "next →",
last: false,
links: "numeric", // blank || title
startPage: 1,
perPage: 10,
midRange: 5,
startRange: 1,
endRange: 1,
keyBrowse: false,
scrollBrowse: false,
pause: 0,
clickStop: false,
delay: 50,
direction: "forward", // backwards || auto || random ||
animation: "", // http://daneden.me/animate/ - any entrance animations
fallback: 400,
minHeight: true,
callback: undefined // function( pages, items ) { }
};
function Plugin(element, options) {
this.options = $.extend({}, defaults, options);
this._container = $("#" + this.options.containerID);
if (!this._container.length) return;
this.jQwindow = $(window);
this.jQdocument = $(document);
this._holder = $(element);
this._nav = {};
this._first = $(this.options.first);
this._previous = $(this.options.previous);
this._next = $(this.options.next);
this._last = $(this.options.last);
/* only visible items! */
this._items = this._container.children(":visible");
this._itemsShowing = $([]);
this._itemsHiding = $([]);
this._numPages = Math.ceil(this._items.length / this.options.perPage);
this._currentPageNum = this.options.startPage;
this._clicked = false;
this._cssAnimSupport = this.getCSSAnimationSupport();
this.init();
}
Plugin.prototype = {
constructor : Plugin,
getCSSAnimationSupport : function() {
var animation = false,
animationstring = 'animation',
keyframeprefix = '',
domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
pfx = '',
elm = this._container.get(0);
if (elm.style.animationName) animation = true;
if (animation === false) {
for (var i = 0; i < domPrefixes.length; i++) {
if (elm.style[domPrefixes[i] + 'AnimationName'] !== undefined) {
pfx = domPrefixes[i];
animationstring = pfx + 'Animation';
keyframeprefix = '-' + pfx.toLowerCase() + '-';
animation = true;
break;
}
}
}
return animation;
},
init : function() {
this.setStyles();
this.setNav();
this.paginate(this._currentPageNum);
this.setMinHeight();
},
setStyles : function() {
var requiredStyles = "<style>" +
".jp-invisible { visibility: hidden !important; } " +
".jp-hidden { display: none !important; }" +
"</style>";
$(requiredStyles).appendTo("head");
if (this._cssAnimSupport && this.options.animation.length)
this._items.addClass("animated jp-hidden");
else this._items.hide();
},
setNav : function() {
var navhtml = this.writeNav();
this._holder.each(this.bind(function(index, element) {
var holder = $(element);
holder.html(navhtml);
this.cacheNavElements(holder, index);
this.bindNavHandlers(index);
this.disableNavSelection(element);
}, this));
if (this.options.keyBrowse) this.bindNavKeyBrowse();
if (this.options.scrollBrowse) this.bindNavScrollBrowse();
},
writeNav : function() {
var i = 1, navhtml;
navhtml = this.writeBtn("first") + this.writeBtn("previous");
for (; i <= this._numPages; i++) {
if (i === 1 && this.options.startRange === 0) navhtml += "<span>...</span>";
if (i > this.options.startRange && i <= this._numPages - this.options.endRange)
navhtml += "<a href='#' class='jp-hidden'>";
else
navhtml += "<a>";
switch (this.options.links) {
case "numeric":
navhtml += i;
break;
case "blank":
break;
case "title":
var title = this._items.eq(i - 1).attr("data-title");
navhtml += title !== undefined ? title : "";
break;
}
navhtml += "</a>";
if (i === this.options.startRange || i === this._numPages - this.options.endRange)
navhtml += "<span>...</span>";
}
navhtml += this.writeBtn("next") + this.writeBtn("last") + "</div>";
return navhtml;
},
writeBtn : function(which) {
return this.options[which] !== false && !$(this["_" + which]).length ?
"<a class='jp-" + which + "'>" + this.options[which] + "</a>" : "";
},
cacheNavElements : function(holder, index) {
this._nav[index] = {};
this._nav[index].holder = holder;
this._nav[index].first = this._first.length ? this._first : this._nav[index].holder.find("a.jp-first");
this._nav[index].previous = this._previous.length ? this._previous : this._nav[index].holder.find("a.jp-previous");
this._nav[index].next = this._next.length ? this._next : this._nav[index].holder.find("a.jp-next");
this._nav[index].last = this._last.length ? this._last : this._nav[index].holder.find("a.jp-last");
this._nav[index].fstBreak = this._nav[index].holder.find("span:first");
this._nav[index].lstBreak = this._nav[index].holder.find("span:last");
this._nav[index].pages = this._nav[index].holder.find("a").not(".jp-first, .jp-previous, .jp-next, .jp-last");
this._nav[index].permPages =
this._nav[index].pages.slice(0, this.options.startRange)
.add(this._nav[index].pages.slice(this._numPages - this.options.endRange, this._numPages));
this._nav[index].pagesShowing = $([]);
this._nav[index].currentPage = $([]);
},
bindNavHandlers : function(index) {
var nav = this._nav[index];
// default nav
nav.holder.bind("click.jPages", this.bind(function(evt) {
var newPage = this.getNewPage(nav, $(evt.target));
if (this.validNewPage(newPage)) {
this._clicked = true;
this.paginate(newPage);
}
evt.preventDefault();
}, this));
// custom first
if (this._first.length) {
this._first.bind("click.jPages", this.bind(function() {
if (this.validNewPage(1)) {
this._clicked = true;
this.paginate(1);
}
}, this));
}
// custom previous
if (this._previous.length) {
this._previous.bind("click.jPages", this.bind(function() {
var newPage = this._currentPageNum - 1;
if (this.validNewPage(newPage)) {
this._clicked = true;
this.paginate(newPage);
}
}, this));
}
// custom next
if (this._next.length) {
this._next.bind("click.jPages", this.bind(function() {
var newPage = this._currentPageNum + 1;
if (this.validNewPage(newPage)) {
this._clicked = true;
this.paginate(newPage);
}
}, this));
}
// custom last
if (this._last.length) {
this._last.bind("click.jPages", this.bind(function() {
if (this.validNewPage(this._numPages)) {
this._clicked = true;
this.paginate(this._numPages);
}
}, this));
}
},
disableNavSelection : function(element) {
if (typeof element.onselectstart != "undefined")
element.onselectstart = function() {
return false;
};
else if (typeof element.style.MozUserSelect != "undefined")
element.style.MozUserSelect = "none";
else
element.onmousedown = function() {
return false;
};
},
bindNavKeyBrowse : function() {
this.jQdocument.bind("keydown.jPages", this.bind(function(evt) {
var target = evt.target.nodeName.toLowerCase();
if (this.elemScrolledIntoView() && target !== "input" && target != "textarea") {
var newPage = this._currentPageNum;
if (evt.which == 37) newPage = this._currentPageNum - 1;
if (evt.which == 39) newPage = this._currentPageNum + 1;
if (this.validNewPage(newPage)) {
this._clicked = true;
this.paginate(newPage);
}
}
}, this));
},
elemScrolledIntoView : function() {
var docViewTop, docViewBottom, elemTop, elemBottom;
docViewTop = this.jQwindow.scrollTop();
docViewBottom = docViewTop + this.jQwindow.height();
elemTop = this._container.offset().top;
elemBottom = elemTop + this._container.height();
return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
// comment above and uncomment below if you want keyBrowse to happen
// only when container is completely visible in the page
/*return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom) &&
(elemBottom <= docViewBottom) && (elemTop >= docViewTop) );*/
},
bindNavScrollBrowse : function() {
this._container.bind("mousewheel.jPages DOMMouseScroll.jPages", this.bind(function(evt) {
var newPage = (evt.originalEvent.wheelDelta || -evt.originalEvent.detail) > 0 ?
(this._currentPageNum - 1) : (this._currentPageNum + 1);
if (this.validNewPage(newPage)) {
this._clicked = true;
this.paginate(newPage);
}
evt.preventDefault();
return false;
}, this));
},
getNewPage : function(nav, target) {
if (target.is(nav.currentPage)) return this._currentPageNum;
if (target.is(nav.pages)) return nav.pages.index(target) + 1;
if (target.is(nav.first)) return 1;
if (target.is(nav.last)) return this._numPages;
if (target.is(nav.previous)) return nav.pages.index(nav.currentPage);
if (target.is(nav.next)) return nav.pages.index(nav.currentPage) + 2;
},
validNewPage : function(newPage) {
return newPage !== this._currentPageNum && newPage > 0 && newPage <= this._numPages;
},
paginate : function(page) {
var itemRange, pageInterval;
itemRange = this.updateItems(page);
pageInterval = this.updatePages(page);
this._currentPageNum = page;
if ($.isFunction(this.options.callback))
this.callback(page, itemRange, pageInterval);
this.updatePause();
},
updateItems : function(page) {
var range = this.getItemRange(page);
this._itemsHiding = this._itemsShowing;
this._itemsShowing = this._items.slice(range.start, range.end);
if (this._cssAnimSupport && this.options.animation.length) this.cssAnimations(page);
else this.jQAnimations(page);
return range;
},
getItemRange : function(page) {
var range = {};
range.start = (page - 1) * this.options.perPage;
range.end = range.start + this.options.perPage;
if (range.end > this._items.length) range.end = this._items.length;
return range;
},
cssAnimations : function(page) {
clearInterval(this._delay);
this._itemsHiding
.removeClass(this.options.animation + " jp-invisible")
.addClass("jp-hidden");
this._itemsShowing
.removeClass("jp-hidden")
.addClass("jp-invisible");
this._itemsOriented = this.getDirectedItems(page);
this._index = 0;
this._delay = setInterval(this.bind(function() {
if (this._index === this._itemsOriented.length) clearInterval(this._delay);
else {
this._itemsOriented
.eq(this._index)
.removeClass("jp-invisible")
.addClass(this.options.animation);
}
this._index = this._index + 1;
}, this), this.options.delay);
},
jQAnimations : function(page) {
clearInterval(this._delay);
this._itemsHiding.addClass("jp-hidden");
this._itemsShowing.fadeTo(0, 0).removeClass("jp-hidden");
this._itemsOriented = this.getDirectedItems(page);
this._index = 0;
this._delay = setInterval(this.bind(function() {
if (this._index === this._itemsOriented.length) clearInterval(this._delay);
else {
this._itemsOriented
.eq(this._index)
.fadeTo(this.options.fallback, 1);
}
this._index = this._index + 1;
}, this), this.options.delay);
},
getDirectedItems : function(page) {
var itemsToShow;
switch (this.options.direction) {
case "backwards":
itemsToShow = $(this._itemsShowing.get().reverse());
break;
case "random":
itemsToShow = $(this._itemsShowing.get().sort(function() {
return (Math.round(Math.random()) - 0.5);
}));
break;
case "auto":
itemsToShow = page >= this._currentPageNum ?
this._itemsShowing : $(this._itemsShowing.get().reverse());
break;
default:
itemsToShow = this._itemsShowing;
}
return itemsToShow;
},
updatePages : function(page) {
var interval, index, nav;
interval = this.getInterval(page);
for (index in this._nav) {
if (this._nav.hasOwnProperty(index)) {
nav = this._nav[index];
this.updateBtns(nav, page);
this.updateCurrentPage(nav, page);
this.updatePagesShowing(nav, interval);
this.updateBreaks(nav, interval);
}
}
return interval;
},
getInterval : function(page) {
var neHalf, upperLimit, start, end;
neHalf = Math.ceil(this.options.midRange / 2);
upperLimit = this._numPages - this.options.midRange;
start = page > neHalf ? Math.max(Math.min(page - neHalf, upperLimit), 0) : 0;
end = page > neHalf ?
Math.min(page + neHalf - (this.options.midRange % 2 > 0 ? 1 : 0), this._numPages) :
Math.min(this.options.midRange, this._numPages);
return {start: start,end: end};
},
updateBtns : function(nav, page) {
if (page === 1) {
nav.first.addClass("jp-disabled");
nav.previous.addClass("jp-disabled");
}
if (page === this._numPages) {
nav.next.addClass("jp-disabled");
nav.last.addClass("jp-disabled");
}
if (this._currentPageNum === 1 && page > 1) {
nav.first.removeClass("jp-disabled");
nav.previous.removeClass("jp-disabled");
}
if (this._currentPageNum === this._numPages && page < this._numPages) {
nav.next.removeClass("jp-disabled");
nav.last.removeClass("jp-disabled");
}
},
updateCurrentPage : function(nav, page) {
nav.currentPage.removeClass("jp-current");
nav.currentPage = nav.pages.eq(page - 1).addClass("jp-current");
},
updatePagesShowing : function(nav, interval) {
var newRange = nav.pages.slice(interval.start, interval.end).not(nav.permPages);
nav.pagesShowing.not(newRange).addClass("jp-hidden");
newRange.not(nav.pagesShowing).removeClass("jp-hidden");
nav.pagesShowing = newRange;
},
updateBreaks : function(nav, interval) {
if (
interval.start > this.options.startRange ||
(this.options.startRange === 0 && interval.start > 0)
) nav.fstBreak.removeClass("jp-hidden");
else nav.fstBreak.addClass("jp-hidden");
if (interval.end < this._numPages - this.options.endRange) nav.lstBreak.removeClass("jp-hidden");
else nav.lstBreak.addClass("jp-hidden");
},
callback : function(page, itemRange, pageInterval) {
var pages = {
current: page,
interval: pageInterval,
count: this._numPages
},
items = {
showing: this._itemsShowing,
oncoming: this._items.slice(itemRange.start + this.options.perPage, itemRange.end + this.options.perPage),
range: itemRange,
count: this._items.length
};
pages.interval.start = pages.interval.start + 1;
items.range.start = items.range.start + 1;
this.options.callback(pages, items);
},
updatePause : function() {
if (this.options.pause && this._numPages > 1) {
clearTimeout(this._pause);
if (this.options.clickStop && this._clicked) return;
else {
this._pause = setTimeout(this.bind(function() {
this.paginate(this._currentPageNum !== this._numPages ? this._currentPageNum + 1 : 1);
}, this), this.options.pause);
}
}
},
setMinHeight : function() {
if (this.options.minHeight && !this._container.is("table, tbody")) {
setTimeout(this.bind(function() {
this._container.css({ "min-heig ht": this._container.css("height") });
}, this), 1000);
}
},
bind : function(fn, me) {
return function() {
return fn.apply(me, arguments);
};
},
destroy : function() {
this.jQdocument.unbind("keydown.jPages");
this._container.unbind("mousewheel.jPages DOMMouseScroll.jPages");
if (this.options.minHeight) this._container.css("min-height", "");
if (this._cssAnimSupport && this.options.animation.length)
this._items.removeClass("animated jp-hidden jp-invisible " + this.options.animation);
else this._items.removeClass("jp-hidden").fadeTo(0, 1);
this._holder.unbind("click.jPages").empty();
}
};
$.fn[name] = function(arg) {
var type = $.type(arg);
if (type === "object") {
if (this.length && !$.data(this, name)) {
instance = new Plugin(this, arg);
this.each(function() {
$.data(this, name, instance);
});
}
return this;
}
if (type === "string" && arg === "destroy") {
instance.destroy();
this.each(function() {
$.removeData(this, name);
});
return this;
}
if (type === 'number' && arg % 1 === 0) {
if (instance.validNewPage(arg)) instance.paginate(arg);
return this;
}
return this;
};
})(jQuery, window, document);</script>
```
- 基本说明
- 常用在线前端CDN库
- 公共代码部分
- HTML基础
- 媒体查询（调整各种屏幕下的效果）
- 网站备案
- 阿里云备案
- 域名解析
- 阿里云常规解析
- 手机端M.后缀
- 301跳转
- 在线客服咨询平台解决方案
- 百度商桥
- 商务通
- 美恰客服
- 腾讯QQ
- 建站系统自带
- 逸创·云客服
- 编辑器组件高级用法
- 社区分享
- 新闻类
- 图文
- Tab组件自定义
- 子导航自定义
- 文字
- 幻灯片
- 手机端导航栏
- 电脑端导航
- 单页面导航
- 单排导航
- 表单
- 栏目条
- 背景
- 图文组件基础应用
- 图文组件高级应用
- jPages分页插件使用（用于普通图文分页）
- 图文上下滚动
- 底部吸底导航
- Layer弹窗特效
- 页面进入弹窗
- 弹窗特效
- 视频弹窗
- 字体图标
- Iconfont（阿里图标库）
- Font Awesome
- Chrome开发者工具中文文档
- 悬浮在线客服
- 华为云右侧在线客服
- 装修公司
- CSS
- DIV CSS3 box-shadow对象盒子阴影和图片阴影
- CSS选择器
- 边框
- 旋转
- JS
- URL网址信息
- JQ
- JQ选择器
- 常用JQ
- jQuery标签替换函数replaceWith()的使用例子
- 锚链接动画
- 手机端
- 全局样式
- 导航
- PC导航菜单
- 插件
- 鼠标悬浮跟随
- 简单的Material Design风格手机App菜单特效
- 动画