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

使用方法：

html代码

<div id="fullpage'">
<div class="section active">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
</div>

假如你需要让某一个section作为首页的第一屏展示，你只需要给这个section添加一个active的类，Fullpage会自动优先展示这个屏

Fullpage自带左右滑动的幻灯片，只需要在section中添加DIV元素，并且给DIV元素添加slide类，FUllpage会自动生成幻灯片特效，例如下面的代码：

<div class="section">
<div class="slide"> Slide 1 </div>
<div class="slide"> Slide 2 </div>
<div class="slide"> Slide 3 </div>
<div class="slide"> Slide 4 </div>
</div>

初始化fullpage的js代码

$(document).ready(function() {
$('#fullpage').fullpage();
});

afterRender()回调函数

$('#fullpage').fullpage({
    afterRender: function(){
        var pluginContainer = $(this);
        alert("The resulting DOM structure is ready");
    }
});
// 我的代码
$('#fullpage').fullpage({
        sectionsColor : ['#333', '#f2f2f2', '#fff','#fff','#fff'],
        navigation: true,
                scrollBar: true,
                afterRender: function()
            {
                //add next slide button action
                $('.mousetip').on('click', function(e)
                {
                    e.preventDefault();
                    $.fn.fullpage.moveSectionDown();
                });
                
            },
    });

Fullpage方法函数

$.fn.fullpage.moveSectionUp();//向上滚动一页
    $.fn.fullpage.moveSectionDown();//向下滚动一页
    $.fn.fullpage.moveTo(section,slide);//从1开始，slide从0开始
    $.fn.fullpage.silentMoveTo(section,slide);//和moveTo一样，但是没有滚动效果
    $.fn.fullpage.moveSlideRight();//幻灯片向右滚动
    $.fn.fullpage.moveSlideLeft();//幻灯片向左滚动
    $.fn.fullpage.setAutoScrolling(boolean);//动态设置autoScrolling
    $.fn.fullpage.setLockAnchors(boolean);//动态设置lockAnchors
    $.fn.fullpage.setRecordHistory(boolean);//动态设置recordHistory
    $.fn.fullpage.setScrollingSpeed(milliseconds);//动态设置scrollingSpeed
    $.fn.fullpage.destory(type);//销毁fullpage,type可以不写或者使用all
    $.fn.fullpage.reBuild();/重新更新页面和尺寸，用于ajax请求改变页面结构后重建效果

网页的头部或底部记得引入fullpage的js和css文件

网上的演示地址：http://fullpage.81hu.com/

自己做的网站：http://www.mseo-webdesign.com/theme/yilitpl/index2.html