写在前面：
转自：http://www.wfuyu.com/s/jquerygroup/limq12lf.html
1. HTML部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<title>Document</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/page.css" />
</head>
<body>
<div class="section sec1">
<div class="middle">
<img src="./images/中间-滑动.png" alt="" />
</div>
</div>
<div class="section sec2">
<div class="middle">
<img src="./images/中间-滑动2.png" alt="" />
</div>
</div>
<div class="section sec3"></div>
<div class="section sec4"></div>
<div class="top">
<img src="./images/最上面.png" alt="" />
</div>
<script src="js/rem.js"></script>
<script src="http://cdn.bootcss.com/zepto/1.1.4/zepto.min.js"></script>
<script src="js/pageSlider.js"></script>
<script>
$(function () {
var pageSlider = PageSlider.case({ loop: true });
});
</script>
</body>
</html>
2. CSS部分：
page.css
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}
/* page */
.section {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.section.current {
display: inline-block;
position: relative;
}
.section.next {
display: inline-block;
z-index: 2;
}
.section.prev {
display: inline-block;
z-index: 2;
}
.sec1 {
background: url(../images/bg.png) no-repeat;
background-size: 100% 100%;
}
.sec2 {
background: #fef7ef;
}
.sec3 {
background: yellow;
}
.sec4 {
background: pink;
}
.middle {
position: absolute;
z-index: 1;
}
.middle img {
width: 2rem;
height: 2rem;
}
.top {
position: fixed;
top: 1rem;
z-index: 2;
}
.top img {
width: 2rem;
height: 2rem;
}
reset.css见上一篇
3. JS部分
pageSlider.js
/*! pageSlider 2015-08-03 */
!(function (a, b) {
"use strict";
function c(a) {
(this.inited = !1),
(this.startY = 0),
(this.distance = 0),
(this.timer = null),
(this.nextPageTop = 0),
(this.prevPageTop = 0),
(this.index = 0),
(this.curPagePos = 0),
(this.nextPagePos = 0),
(this.pageHeight = 0),
(this.prevPagePos = 0),
(this.opt = {
startPage: 1,
range: 70,
duration: 200,
loop: !1,
elastic: !0,
translate3d: !0,
callback: {},
}),
this.init(a);
}
(c.prototype.motion = function (a) {
return this.opt.translate3d
? "translate3d(0," + a + "px,0)"
: "translate(0," + a + "px)";
}),
(c.prototype.showSec = function (b, c) {
a(".current").length &&
a(".current,.next,.prev")
.css({ "-webkit-transition": null, "-webkit-transform": null })
.removeClass("current prev next");
var d,
e,
f,
g = a(".section").length;
"next" == c
? ((d = b == g ? 1 : b + 1),
(e = d == g ? (this.opt.loop ? 1 : 0) : d + 1),
(f = b))
: "prev" == c
? ((d = 1 == b ? g : b - 1),
(e = b),
(f = 1 == d ? (this.opt.loop ? g : 0) : d - 1))
: ((d = b),
(e = b == g ? (this.opt.loop ? 1 : 0) : b + 1),
(f = 1 == b ? (this.opt.loop ? g : 0) : b - 1));
var h = a(".sec" + d),
i = a(".sec" + e),
j = a(".sec" + f);
h.addClass("current"),
(this.pageHeight = a(".current").height()),
i
.addClass("next")
.css("-webkit-transform", this.motion(this.pageHeight)),
j
.addClass("prev")
.css("-webkit-transform", this.motion(-this.pageHeight)),
h.addClass("ani").siblings(".section").removeClass("ani"),
"function" == typeof this.opt.callback[d] && this.opt.callback[d]();
}),
(c.prototype.touchStartHandler = function (b) {
var c = b.data.that;
if (c.timer) return void b.preventDefault();
c.index = a(".section").index(a(this)) + 1;
var d = b.touches[0];
(c.distance = 0),
(c.startY = d.clientY),
(c.curPagePos = a(this).offset().top),
(c.nextPagePos = a(".next").length && a(".next").offset().top),
(c.prevPagePos = a(".prev").length && a(".prev").offset().top),
a(this)
.off("touchmove")
.on("touchmove", { that: c }, c.touchMoveHandler),
a(this).off("touchend").on("touchend", { that: c }, c.touchEndHandler),
b.preventDefault();
}),
(c.prototype.touchMoveHandler = function (b) {
var c = b.data.that;
if (c.timer) return void b.preventDefault();
var d = b.touches[0];
return (
(c.distance = d.clientY - c.startY),
Math.abs(c.distance) < 5
? void b.preventDefault()
: !c.opt.elastic &&
((1 === c.index && c.distance > 0) ||
(c.index === a(".section").length && c.distance < 0))
? void b.preventDefault()
: ((c.curPageTop = c.curPagePos + c.distance),
(c.nextPageTop = c.nextPagePos + c.distance),
(c.prevPageTop = c.prevPagePos + c.distance),
a(this).css("-webkit-transform", c.motion(c.curPageTop)),
a(".next").css("-webkit-transform", c.motion(c.nextPageTop)),
a(".prev").css("-webkit-transform", c.motion(c.prevPageTop)),
void b.preventDefault())
);
}),
(c.prototype.touchEndHandler = function (b) {
var c = b.data.that;
if (c.timer) return void b.preventDefault();
if (
(a(".current,.next,.prev").css(
"-webkit-transition",
"-webkit-transform " + c.opt.duration + "ms linear"
),
(c.distance < -c.opt.range && a(".next").length) ||
(c.distance > c.opt.range && a(".prev").length))
) {
var d = !!(c.distance < -c.opt.range);
a(this).css(
"-webkit-transform",
c.motion(d ? -a(this).height() : a(this).height())
),
a(d ? ".next" : ".prev").css("-webkit-transform", c.motion(0)),
(c.timer = setTimeout(function () {
c.showSec(c.index, d ? "next" : "prev"),
clearTimeout(c.timer),
(c.timer = null);
}, c.opt.duration + 5));
} else
a(this).css("-webkit-transform", c.motion(0)),
a(".prev").css("-webkit-transform", c.motion(-c.pageHeight)),
a(".next").css("-webkit-transform", c.motion(c.pageHeight)),
(c.timer = setTimeout(function () {
a(".current,.next,.prev").css({ "-webkit-transition": null }),
clearTimeout(c.timer),
(c.timer = null);
}, c.opt.duration + 5));
b.preventDefault();
}),
(c.prototype.go = function (a) {
this.init(a);
}),
(c.prototype.init = function (c) {
var d = this;
"object" == typeof c
? (a.extend(!0, d.opt, c), (d.inited = !1))
: c && (d.opt.startPage = c),
d.inited
? d.showSec(d.opt.startPage)
: (a(".section")
.off("touchstart")
.on("touchstart", { that: d }, d.touchStartHandler),
d.showSec(d.opt.startPage),
(d.inited = !0)),
a(b).on(
"onorientationchange" in b ? "orientationchange" : "resize",
function () {
d.go(d.index + 1);
}
);
}),
(c["case"] = function (a) {
return new c(a);
}),
"function" == typeof define && "object" == typeof define.amd && define.amd
? define(function () {
return c;
})
: "undefined" != typeof module && module.exports
? ((module.exports = c["case"]), (module.exports.PageSlider = c))
: (b.PageSlider = c);
})(window.Zepto, window, document);
其他的js见上一篇，《移动端适配方案》
标签：opt,特效,翻动,function,next,webkit,prev,端整,css From： https://www.cnblogs.com/kymming/p/16911861.html