fullpage插件基本应用-CSDN博客

介绍：

fullpage.js是一个基于jQuery的插件，它能够很方便、很轻松的制作出全屏网站。

主要功能：支持鼠标滚动、多个回调函数、支持手机、平板触摸事件、支持css3动画、支持窗口缩放、窗口缩放自动调整、可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等

使用准备：

引入fullpage的css样式：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.css">复制代码

引入fullpage的js：

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.js"></script>复制代码

引入jQuery：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>复制代码

最终效果：

所有代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <title>fullpage</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.css">
    <style>
        .slide{
            text-align: center;
        }
        #header{
            position: fixed;
            top: 0;
            left: 50%;
            color: white;
        }
        #fullpageMenu{
            position: fixed;
            top:0;
            z-index: 999;
        }
        #fullpageMenu a{
            color: white;
        }
    </style>
</head>
<body>
<ul id="fullpageMenu">
    <li data-menuanchor="page1" class="active"><a href="#page1">1 section</a></li>
    <li data-menuanchor="page2"><a href="#page2">2 section</a></li>
    <li data-menuanchor="page3"><a href="#page3">3 section</a></li>
    <li data-menuanchor="page4"><a href="#page4">4 section</a></li>
</ul>
<div id="fullpage">
    <header id="header"><h2>header</h2></header>
    <!--类名active自动定位到某个页面-->
    <div class="section"><h1>这是第一屏</h1></div>
    <div class="section">
        <div class="slide">slide1</div>
        <div class="slide">slide2</div>
        <div class="slide">slide3</div>
        <div class="slide">slide4</div>
    </div>
    <div class="section"><h1>这是第三屏</h1></div>
    <div class="section"><h1>这是第四屏</h1></div>
</div>
</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.8/jquery.slimscroll.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.js"></script>
<script>
    //页面开始时激活fullpage
    $(document).ready(function () {
        $('#fullpage').fullpage({
            //section的背景色设置
            sectionsColor:['#282c34','#e4393b','yellowgreen','rebeccapurple'],
            // controlArrows:falsecontrolArrows:false
            //verticalCentered:false
            //页面滚动速度
            //scrollingSpeed:1500
            anchors:['page1','page2','page3','page4'],
            //loopTop:true,
            //页面滚动到底部是否回到第一屏
            loopBottom:true,
           // loopHorizontal:true
            fixedElements:"#header",
            menu:'#fullpageMenu',
            navigation:true,
            navigationPosition:'right',
            navigationTooltips:['page1','page2','page3','page4'],
            scrollOverflow:true,
            afterLoad:function (anchorLink,index) {
                console.log("afterLoad:anchorLink="+anchorLink
                +";index="+index
                );
            }
        });
    })
</script>复制代码

模块解释：

class是section的板块是一页，class是slide的板块是一张幻灯片

常用配置项：

1.激活fullpage

$('#fullpage').fullpage({

});复制代码

2.sectionColor：为每一个section设置背景色，

3.anchors：定义锚链接，默认值为[]。有了锚链接，用户就可以快速打开定位到某一页面。

4.loopTop：滚动到最顶部后是否连续滚动到底部，默认为false。

5.loopBottom：滚动到最底部后是否连续滚动回顶部，默认为false。

6.fixedElements：设置固定元素，如底部和顶部导航等。

7.recordHistory：是否记录历史，默认为true。

8.menu:绑定菜单。

9.navigation：是否显示导航，默认为false，设置为true，会显示小圆点。

10.navigationPosition：导航小圆点的位置，left或right。

11.navigationTooltips：小圆点的文字提示设置。

常用方法：

1.moveSectionU():向上滚动一页

2.moveSectionDown(): 向下滚动一页

3.moveTo(section,slide):滚动到某页某个幻灯片