如果你要制作一个全屏的网页，使用这个插件在合适不过，如QQ浏览器官方网站
直接下载
使用方法
1.引入fullpage.css文件
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css">
2.引入jq 和 fullpage.js文件
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
3.初始化
//html
<div id="fullpage">
<div class="section">第一屏</div>
<div class="section">第二屏</div>
<div class="section">
第三屏幕
<div class="slide">第三屏的第一屏</div>
<div class="slide">第三屏的第二屏</div>
<div class="slide">第三屏的第三屏</div>
<div class="slide">第三屏的第四屏</div>
</div>
<div class="section">第四屏</div>
</div>
//js
$('#fullpage').fullpage({
navigation:true,//显示导航
navigationPosition:'right',
//导航显示右边
controlArrowColor:'red',//左右滑块背景颜色
});
4.参数设置
传递对象形式
| 参数 | 说明 |
|---|---|
| resize | (true/false)字体是否随着窗口缩放而缩放 |
| slidesColor | 设置背景颜色 |
| anchors | (array)定义锚链接 |
| scrollingSpeed | （int） 设置滚动速度，单位为毫秒 |
| easing | （striing）滚动动画方式 |
| menu | (true/false) 绑定菜单，设定的相关属性与 anchors 的值对应后，菜单可以控制滚动 |
| navigation | (true/false)是否显示项目导航 |
| navigationPosition | (string) 项目导航的位置，可选 left 或 right |
| navigationColor | (string)项目导航的颜色 |
| navigationTooltips | (array)项目导航的 tip |
| slidesNavigation | (true/false) 是否显示左右滑块的项目导航 |
| slidesNavPosition | (string)左右滑块的项目导航的位置，可选 top 或 bottom |
| controlArrowColor | (string) 左右滑块的箭头的背景颜色 |
| loopBottom | (true/false)滚动到最底部后是否滚回顶部 |
| loopTop | (true/false)滚动到最顶部后是否滚底部 |
| loopHorizontal | (true/false)左右滑块是否循环滑动 |
| autoScrolling | (true/false) 是否使用插件的滚动方式，如果选择 false，则会出现浏览器自带的滚动条 |
| scrollOverflow | (true/false)内容超过满屏后是否显示滚动条 |
| css3 | (true/false) 是否使用 CSS3 transforms 滚动 |
| paddingTop | string() 与顶部的距离 |
| paddingBottom | string() 与底部距离 |
| keyboardScrolling | (true/false) 是否使用键盘方向键导航 |
| continuousVertical | (true/false)是否循环滚动，与 loopTop 及 loopBottom 不兼容 |
5.常用方法
| moveSectionUp() | 向上滚动 |
| moveSectionDown() | 向下滚动 |
| moveTo(section, slide) | 滚动到 |
| moveSlideRight() | slide 向右滚动 |
| moveSlideLeft() | slide 向左滚动 |
| setAutoScrolling() | 设置页面滚动方式，设置为 true 时自动滚动 |
| setAllowScrolling() | 添加或删除鼠标滚轮/触控板控制 |
| setKeyboardScrolling() | 添加或删除键盘方向键控制 |
| setScrollingSpeed() | 定义以毫秒为单位的滚动速度 |
6.回调函数
| afterLoad () | 滚动到某一屏后的回调函数，接收 anchorLink 和 index 两个参数，anchorLink 是锚链接的名称，index 为序号，从1开始计算 |
| onLeave() | 滚动前的回调函数，接收 index、nextIndex 和 direction 3个参数：index 是离开的“页面”的序号，从1开始计算；nextIndex 是滚动到的“页面”的序号，从1开始计算；direction 判断往上滚动还是往下滚动，值是 up 或 down。 |
| afterRender | 页面结构生成后的回调函数，或者说页面初始化完成后的回调函数 |
| afterSlideLoad | 滚动到某一水平滑块后的回调函数，与 afterLoad 类似，接收 anchorLink、index、slideIndex、direction 4个参数 |
| onSlideLeave | 某一水平滑块滚动前的回调函数，与 onLeave 类似，接收 anchorLink、index、slideIndex、direction 4个参数 |
7.demo
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css">
<style type="text/css">
*{
margin:0;
padding:0;
}
#fullpage .section{
width:100%;
height:400px;
background: skyblue;
margin:30px 0;
}
.section .slide{
width: 200px;
height:200px;
margin:0 auto;
border:1px solid red;
}
</style>
</head>
<body>
<div id="fullpage">
<div class="section">第一屏</div>
<div class="section">第二屏</div>
<div class="section">
第三屏幕
<div class="slide">第三屏的第一屏</div>
<div class="slide">第三屏的第二屏</div>
<div class="slide">第三屏的第三屏</div>
<div class="slide">第三屏的第四屏</div>
</div>
<div class="section">第四屏</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<!-- <script type="text/javascript" src='../jquery.easing.1.3'></script> -->
<script src="js/jquery.fullPage.min.js"></script>
<script type="text/javascript">
$(function(){
$('#fullpage').fullpage({
navigation:true,//显示导航
navigationPosition:'right',
//导航显示右边
controlArrowColor:'red',//左右滑块背景颜色
});
});
</script>
</body>
</html>
