FullPage.js全屏滚动插件使用攻略

2025-12-21 12:53:12

1、引入文件:

<link rel="stylesheet" href="css/jquery.fullPage.css">

<script src="js/jquery.min.js"></script>

<!-- jquery.easings.min.js 用于 easing 参数,也可以使用完整的 jQuery UI 代替,如果不需要设置 easing 参数,可去掉改文件 -->

<script src="js/jquery.easings.min.js"></script>

<!-- 如果 scrollOverflow 设置为 true,则需要引入 jquery.slimscroll.min.js,一般情况下不需要 -->

<script src="js/jquery.slimscroll.min.js"></script>

<script src="js/jquery.fullPage.js"></script>

2、<div id="dowebok">

    <div class="section">

        <h3>第一屏</h3>

    </div>

    <div class="section">

        <h3>第二屏</h3>

    </div>

    <div class="section">

        <h3>第三屏</h3>

    </div>

    <div class="section">

        <h3>第四屏</h3>

    </div>

</div>

每个 section 代表一屏,默认显示“第一屏”,如果要指定加载页面时显示的“屏幕”,可以在对应的 section 加上 class=”active”,如:

<div class="section active">第三屏</div>

同时,可以在 section 内加入 slide,如:

<div id="dowebok">

    <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>

3、调用的JavaScript代码如下:

$(function(){

    $('#dowebok').fullpage();

});

4、配置项如下图所示:

FullPage.js全屏滚动插件使用攻略

5、方法,如下图所示:

FullPage.js全屏滚动插件使用攻略

6、回调函数,如下图所示:

FullPage.js全屏滚动插件使用攻略

7、运行效果如下图所示:

FullPage.js全屏滚动插件使用攻略

FullPage.js全屏滚动插件使用攻略

FullPage.js全屏滚动插件使用攻略

FullPage.js全屏滚动插件使用攻略

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢