配置项介绍
一、sectionsColor:
可以为每个section设置background-color属性。示例如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
<title>Fullpage简单例子</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.css"/>
<style type="text/css">
body{
color:#fff;/*文字为白色*/
}
.slide{
text-align: center;
font-size: 20px;
}
</style>
</head>
<body>
<div id="fullpage">
<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 class="slide">slide5</div>
<div class="slide">slide6</div>
</div>
<div class="section"><h1>这是第三屏</h1></div>
<div class="section"><h1>这是第四屏</h1></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.js"></script>
<!--sectionsColor使用-->
<script>
$(document).ready(function(){
$('#fullpage').fullpage({
sectionsColor:['green','orange','gray','red'],
});
});
</script>
</body>
</html>
二、controlArrows:
定义是否通过箭头来控制slide幻灯片,默认为true。当我们设置为false,则幻灯片左右两侧的箭头就会消失,在移动设备上,我们可以通过滑动来操作幻灯片。(在PC端无法观看此效果)
三、verticalCentered:
每一页的内容是否垂直居中,默认为true。一般我们保持默认值。
四、resize:
字体是否随着窗口缩放而缩放,默认为false。
五、scrollingSpeed:
滚动速度,单位为毫秒,默认为700。
六、anchors:
定义锚链接,默认值为[]。有了锚链接,用户就可以快速打开定位到某一页。
注:定义锚链接的时候,值不要和页面中任意的id或name相同,尤其是在IE浏览器下。而且定义时不需要加#。
七、lockAnchors:
是否锁定锚链接,默认为false。如果设置为true,那么定义的锚链接,也就是anchors属性则没有效果。这个配置项使用的比较少。
八、easing:
定义页面section滚动的动画方式,默认为easeInOutCubic,如果修改此项,需要引入jquery.easing插件,或者jqueryUi。
注:动画之间的差异比较小,因此可不用设置。
九、css3:
是否使用css3 transforms来实现滚动效果,默认为true。这个配置项可以提高支持css3的浏览器,比如移动设备等的速度,如果浏览器不支持css3,则会使用jquery来代替css3实现滚动效果。
十、滚动方式
loopTop:滚动到最顶部后是否连续滚动到底部,默认为false。
loopBottom:滚动到最底部后是否连续滚动到顶部,默认为false。
loopHorizontal:横向幻灯片是否循环滚动,默认为true。
十一、autoScrolling:
是否使用插件的滚动方式,默认为true,如果选择false,则会出现浏览器自带的滚动条,将不会按页滚动,而是按照滚动条的默认行为来滚动。
十二、scrollBar:
是否包含滚动条,默认为false,如果设置为true,则浏览器自带的滚动条出现,页面滚动时还是按页滚动,但滚动条的默认行为也有效。
十三、paddingTop/paddingBottom
设置每一个section顶部和底部的padding,默认都为0。一般如果我们需要设置一个固定的在顶部或者底部的菜单、导航、元素等,可以使用者两个配置项。
十四、fixedElements:
固定的元素,默认为null,需要配置一个jquery选择器。在页面滚动的时候,fixedElements设置的元素不动。
十五、keyboardScrolling:
是否可以使用键盘方向键导航,默认为true。