思路：首先设置css样式，让.wrapper 相对于文档绝对定位，然后判断键盘上下键，按了上键就让文档整体往上走，按了下键就让文档整体往下走，前提是有对应的上一页和下一页，然后再判断当前显示的slide中有没有横向滚动的内容，让横向内容相对于slide绝对定位，需要横向滚动几次，然后就是按了左键，横向内容往左走，按了右键，横向内容往右走。还有个点需要注意就是在运动过程中按了好几次上下左右键，这时候用lock判断当前是否处于运动中，要是运动中，就不响应了，如果不是运动中，就看看是不是符合条件，要是符合条件就进入相对应的内容
html页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.slide {
padding: 20px;
text-align: center;
}
.info{
width: 80%;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="slide">
<h1> 优秀学员俱乐部</h1>
<p>部分25-45W年薪学员</p>
</div>
<div class="slide">
<div class="slidebox">
<h1>业界名师 卓尔不凡</h1>
<p>互联网一线大咖亲授 祝你圆梦IT</p>
</div>
<div class="slidebox">
<h1>内推合作机构 助力学员就业</h1>
<p>Cooperation enterprise</p>
</div>
<div class="slidebox">
<p class="info">渡一科技教育公司成立于 2007 年，后经历几轮兼并收购，成立渡一信息技术开发有限公司，下设渡一教育品牌。公司核心业 务包含科技类外包，IT 教育培训等业务。企业开展教育业务至今已有8年整，线下市场辐射区域已达整个哈尔滨市，线上辐射区域以达至全国范围，是国内首批开设专业web前端、java培训的教育公司。渡一教育于2017年中在腾讯课堂正式布局线上教育业务，一经推出变得到线上学员和腾讯平台的一致好评！2018-2019年连续获得腾讯课堂官方认证机构、金课堂、创造101火箭机构等最具含金量奖项。 </p>
</div>
</div>
<div class="slide">
<h1>育人为渡，经久如一</h1>
<p>我们不会辜负时代赋予我们的历史性机遇，为构建技术 互联网的超科技时代，一往无前。在渡一，愿我们拥有 更多可能，也期待你们脚下有风，各自灿烂。 </p>
</div>
</div>
<script src="jquery.js"></script>
<script src="./fullpage.js"></script>
</body>
</html>
fullpage.js 文件代码
$.fn.extend({
fullpage: function (config) {
//设置样式
var windowWidth = $(window).innerWidth(),
windowHeight = $(window).innerHeight(),
currentPage = 1,
slideboxPage = 1,
direction="",
lock = false, //false可以点击 true不能点击
$wrapper = $(".wrapper"),
totalPage = $wrapper.children().length,
$wraperinner = $(".wraperinner"),
colorsArray = ["http://www.duyiedu.com/source/img/banner1.png", "http://www.duyiedu.com/source/img/banner2.png", "http://www.duyiedu.com/source/img/banner3.png", "http://www.duyiedu.com/source/img/banner1.png", "http://www.duyiedu.com/source/img/banner2.png", "http://www.duyiedu.com/source/img/banner3.png"];
$("html").add("body").css({
margin: "0px",
padding: "0px",
position: "relative",
overflow: "hidden"
})
.add(".wrapper").add(".slide").css({
width: "100%",
height: "100%"
});
//判断每个slide下有几个横向页面
$wrapper.find(".slide").each(function (i, ele) {
$(ele).css({backgroundImage:"url("+colorsArray[i]+")",backgroundSize:"cover",backgroundPosition:"center"}).find(".slidebox").wrapAll("<div class='wraperinner'></div>");
var len = $(ele).find(".wraperinner").children().length;
$(ele).find(".wraperinner").css("width", len * windowWidth);
})
//设置每个横向父级div宽度
$wrapper.add(".wraperinner").css({
position: "relative",
left: 0,
right: 0,
bottom: 0,
top: 0,
height: "100%"
})
$wrapper.css("position","absolute")
//设置slidebox
$(".slidebox").css({
float: "left",
width: windowWidth,
height: "100%"
})
//初始化 config.pageLoad(currentPage)
config.pageLoad && config.pageLoad(currentPage)
$(document).on("keydown", function (e) {
if (lock) {
return;
}
lock = true;
//获取当前wrapper的位置
var wrapperOffsetTop = $wrapper.offset().top;
//console.log("wrapperOffsetTop: " + wrapperOffsetTop);
//获取当前slide是否有横向页面
var slideboxTotalPage = $(".slide").eq(currentPage - 1).find(".slidebox").length;
//console.log("slideboxTotalPage: " + slideboxTotalPage);
//上：38 下：40 左：37 右：39
if (e.which == 38 && currentPage > 1) {
//按了上一页且有上一页
direction="up";
config.onLeave && config.onLeave(currentPage,direction);
currentPage--;
$wrapper.animate({
top: wrapperOffsetTop + windowHeight
}, 500, "swing", function () {
lock = false;
config.pageLoad && config.pageLoad(currentPage)
});
//console.log("按了上一页且有上一页, currentPage: " + currentPage)
} else if (e.which == 40 && currentPage < totalPage) {
//按了下一页且有下一页
direction="down";
config.onLeave && config.onLeave(currentPage,direction);
currentPage++;
$wrapper.animate({
top: wrapperOffsetTop - windowHeight
}, 500, "swing", function () {
lock = false;
config.pageLoad && config.pageLoad(currentPage)
});
//console.log("按了下一页且有下一页, currentPage: " + currentPage)
} else if (e.which == 37 && slideboxPage > 1 && slideboxTotalPage) {
//当前页slidebox位置
var $wraperinnerCurrent =$(".slide").eq(currentPage-1).children();
wraperinnerOffsetLeft = $wraperinnerCurrent.offset().left;
//按了左按钮且左边还有页面
direction="left";
slideboxPage--;
$wraperinnerCurrent.animate({
left: wraperinnerOffsetLeft + windowWidth
}, 500, "swing", function () {
lock = false;
config.pageLoad && config.pageLoad(currentPage)
});
//console.log("按了左按钮且左边还有页面, slideboxPage: " + slideboxPage)
} else if (e.which == 39 && slideboxTotalPage && slideboxPage < slideboxTotalPage) {
//当前页slidebox位置
var $wraperinnerCurrent =$(".slide").eq(currentPage-1).children();
wraperinnerOffsetLeft = $wraperinnerCurrent.offset().left;
//按了右按钮且右边还有页面
direction="right";
slideboxPage++;
$wraperinnerCurrent.animate({
left: wraperinnerOffsetLeft - windowWidth
}, 500, "swing", function () {
lock = false;
config.pageLoad && config.pageLoad(currentPage)
});
//console.log("按了右按钮且右边还有页面, slideboxPage: " + slideboxPage)
}else{
lock=false;
}
})
}
})
$(".wrapper").fullpage({
onLeave:function(index,direction){
console.log(index,direction)
},
pageLoad:function(index){
console.log(index)
$(".slide").eq(index-1).children().animate({fontSize:"+=10px"}).animate({fontSize:"-=10px"});
}
})
