fullpage.js里的方法怎么放

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

主要功能

支持鼠标滚动

支持前进后退和键盘控制

多个回调函数

支持手机、平板触摸事件

支持 CSS3 动画

支持窗口悔亮档缩放

窗口缩放时自动调整

可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等

兼容性

fullPage.js 支持 IE8+ 及其他现代浏览器。

使用方法

1、引入文件

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

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

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

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

2、HTML

<div id="fullpage">

<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(){

$('#fullpage').fullpage({

'verticalCentered': false,

'css3': true,

'sectionsColor': ['#254875', '#00FF00', '#254587', '#695684'],

anchors: ['page1', 'page2', 'page3', 'page4'],

'navigation': true,

'navigationPosition': 'right',

'navigationTooltips': ['fullPage.js', 'Powerful', 'Amazing', 'Simple']

})

})

经测试，最好至少有 anchors 这个参数，否则在火狐浏览器中，第一次滚动会直接滚到底部，点击这里查看上面代码的示例：Fullpage简单示例

可选配置

1、选项

选项

类型

默认值

说明

verticalCentered字符串true内容是否垂直居中

resize布尔值false字体是否随着窗口缩放而缩放

slidesColor函数无设置背景颜色

anchors数组无定义锚链接

scrollingSpeed整数700滚动速度，单位为毫秒

easing字符串easeInQuart滚动动画方式

menu布尔值false绑定菜单，设定的相关属性与 anchors 的值对应后，菜单可以控制滚动

navigation布尔值false是键消否显示项目导航

navigationPosition字符串right项目碧乱导航的位置，可选 left 或 right

navigationColor字符串#000项目导航的颜色

navigationTooltips数组空项目导航的 tip

slidesNavigation布尔值false是否显示左右滑块的项目导航

slidesNavPosition字符串bottom左右滑块的项目导航的位置，可选 top 或 bottom

controlArrowColor字符串#fff左右滑块的箭头的背景颜色

loopBottom布尔值false滚动到最底部后是否滚回顶部

loopTop布尔值false滚动到最顶部后是否滚底部

loopHorizontal布尔值true左右滑块是否循环滑动

autoScrolling布尔值true是否使用插件的滚动方式，如果选择 false，则会出现浏览器自带的滚动条

scrollOverflow布尔值false内容超过满屏后是否显示滚动条

css3布尔值false是否使用 CSS3 transforms 滚动

paddingTop字符串0与顶部的距离

paddingBottom字符串0与底部距离

fixedElements字符串无

normalScrollElements无

keyboardScrolling布尔值true是否使用键盘方向键导航

touchSensitivity整数5

continuousVertical布尔值false是否循环滚动，与 loopTop 及 loopBottom 不兼容

animateAnchor布尔值true

normalScrollElementTouchThreshold整数5

2、方法

名称

说明

moveSectionUp()向上滚动

moveSectionDown()向下滚动

moveTo(section, slide)滚动到

moveSlideRight()slide 向右滚动

moveSlideLeft()slide 向左滚动

setAutoScrolling()设置页面滚动方式，设置为 true 时自动滚动

setAllowScrolling()添加或删除鼠标滚轮/触控板控制

setKeyboardScrolling()添加或删除键盘方向键控制

setScrollingSpeed()定义以毫秒为单位的滚动速度

3、回调函数

名称

说明

afterLoad滚动到某一屏后的回调函数，接收 anchorLink 和 index 两个参数，anchorLink 是锚链接的名称，index 是序号，从1开始计算

onLeave滚动前的回调函数，接收 index、nextIndex 和 direction 3个参数：

index 是离开的“页面”的序号，从1开始计算；

nextIndex 是滚动到的“页面”的序号，从1开始计算；

direction 判断往上滚动还是往下滚动，值是 up 或 down。

afterRender页面结构生成后的回调函数，或者说页面初始化完成后的回调函数

afterSlideLoad滚动到某一水平滑块后的回调函数，与 afterLoad 类似，接收 anchorLink、index、slideIndex、direction 4个参数

onSlideLeave某一水平滑块滚动前的回调函数，与 onLeave 类似，接收 anchorLink、index、slideIndex、direction 4个参数

自定义Section高度

实现自定义底部高度的方法，而且是不算在滑动的Section里面，在需要自定义高度的DIV里面，只需要给Section添加.fp-height-auto类就可以实现自定义高度。

相关链接

官网地址：http://alvarotrigo.com/fullPage/ jQuery无法加载导致页面失效

问说网Fullpage官网离线版：http://www.uedsc.com/wp-content/uploads/2015/02/fullpage/

GitHub 地址：https://github.com/alvarotrigo/fullPage.js

问说网下载地址：http://static.uedsc.com/fullPage.js-master.zip

答：fullpage是一个插件，自适应全屏切换的， 但是在这个插件中使用这个标签的时候填写资料它的位置会改变<!-- jquery.easings.min.js 用于 easing 参数，也可以使用完整的 jQuery UI 代替，如果不需要设置 easing 参数，可去掉改文件 -->你可以找到他的demo文件，然后把没用的内容一个个删除，当然每删一迅凯个就要做一次测试，当这个demo文件你删到不能再删的时候，剩下的就是这个插件需要的网页基本架构，然改枯后你再往里面填你的东西就好了。修改demo之前要先把demo文件备份啊，要不然还要麻烦。我把你这代码加上去没用啊？自动不了哥们，你有qq么？或是进这里面下载 第8个html 就是要改成自动滚动的，麻烦你了 交个朋友我把你这代码加上去没用啊？自动不了，你有qq么？或是进这里面下载 第8个html 就是要改成自动滚动的，麻烦你了 交个朋亩歼唤友不好意思搞错了，那个是动态生成的按钮这样写触发不了事件。我看了下插件他里面自带的有自动滚动的啊参数设置，附件里做好了给你 表明了代码1-4谢谢你哇，感激

把第一页的 <li data-menuanchor="page1" class="active">里面的class="active" 去掉 默认一开始就不显示第一个前握敬了

如果第一页不显示了，在页面初始化皮枯的地方 给它加上active这个class属性 就能实现初始化第一页就有动画效果了

afterRender以你的代码给你举个例子

$.fn.fullpage({

slidesColor: ['#fff', '#fff', '#fff', '#fff', '#fff'],

anchors: ['page1', 'page2', 'page3', 'page4', 'page5'],

menu: '#menu',

afterRender: function(){

alert('ok')

}

})

纯手慧慎打，有问题欢迎咨询

给你一个参考地址：

http://www.dowebok.com/78.html

---