fullPage常用属性

紧接着上一篇 fullPage基本使用本章节介绍的内容为 fullPage 的常用的一些属性，属性非常多，你可以自行参考官方文档，我这里就只介绍一些常用的，官方文档地址：https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese#fullpagejs

常用属性

属性名称	作用
sectionsColor	（默认 `none` ）为每个 section 定义 CSS `background-color` 属性，设置每一屏的背景颜色
navigation	（默认 `false` ）如果设置为 `true` ，则会显示一个由小圆圈组成的导航栏，显示指示器
navigationTooltips	（默认为[]）定义要使用导航圈的提示。例如：`navigationTooltips：['firstSlide'，'secondSlide']`。如果您愿意，也可以在每个部分中使用属性 `data-tooltip` 来定义它们，设置指示器的提示信息
showActiveTooltip	（默认为 `false`）在显示垂直导航中主动显提示，让指示器的提示信息默认就显示
navigationPosition	（默认 none ）可以设置为 left 或 right ，并定义导航栏显示的位置（如果使用的话）设置指示器显示的位置 (可以是左边，也可以是右边)
loopBottom	（默认为 `false`）定义首尾链接滚动方式(尾向下) 滚动到最后一屏或者第一屏是否要接着滚动
loopTop	（默认为 `false`）定义首尾链接滚动方式(首向上) 滚动到第一屏或者最后一屏是否要接着滚动
continuousVertical	（默认为 `false`）定义首位链接循环(最后一个 section 向下滚动，滚动到第一个section，或第一个 section 向上滚动时滚动到最后一个 section )。不兼容 `loopTop` ，`loopBottom` 或站点中存在的任何滚动条（`scrollBar：true` 或 `autoScrolling：false` ）

代码示例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fullpage常用属性</title>
    <link rel="stylesheet" href="css/fullpage.css">
    <!--注意点: 由于fullPage.js 是一个基于 jQuery 的插件, 所以需要先引入jQuery.js-->
    <script src="js/jquery-3.1.1.js"></script>
    <script src="js/easings.js"></script>
    <script src="js/scrolloverflow.js"></script>
    <script src="js/fullpage.js"></script>
</head>
<body>
<div id="fullpage">
    <div class="section">Some section11111111</div>
    <div class="section">Some section22222222</div>
    <div class="section">Some section33333333</div>
    <div class="section">Some section44444444</div>
</div>
<script>
    new fullpage('#fullpage', {
        // options here
        // 设置每一屏的背景颜色
        sectionsColor: ['#f00', '#0f0', '#00f', '#000'],
        
        // 显示指示器
        navigation: true,
        
        // 设置指示器的提示信息
        navigationTooltips: ['111111111111111', '222222222222', '3333333333333333', '4444444444444'],
        
        // 让指示器的提示信息默认就显示
        showActiveTooltip: true,
        
        // 设置指示器显示的位置(可以是左边, 也可以是右边)
        // navigationPosition: 'left',
        
        // 滚动到最后一屏或者第一屏是否要接着滚动
        // loopBottom: true,
        
        // loopTop: true,
        
        continuousVertical: true,
    });
</script>
</body>
</html>

浏览器中的效果如下

test