紧接着上一篇 ​​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>

浏览器中的效果如下

fullPage常用属性_css