前期工作
** 1、在页面引入 start **
- 插件最新版本2.6.7，需要先引入JQuery ( https://cdnjs.com/ 更新快，但是如果加载速度慢可以使用百度的静态资源库 http://cdn.code.baidu.com/ )
css :
https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.min.css
js:
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.js
https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery-easing.js
https://cdnjs.cloudflare.com/ajax/libs/�fullPage.js/2.6.7/jquery.fullPage.js
** 2、基本结构 **
<div id="fullPage">
<div class="section">something</div>
<div class="section">something</div>
<div class="section">something</div>
<div class="section">something</div>
</div>
给一个 section页 添加slide(幻灯片)
<div class="section">
<div class="slide">side1</div>
<div class="slide">side2</div>
<div class="slide">side3</div>
</div>
** 3、激活fullPage **
$(document).ready(function(){
$('#fullPage').fullpage();
});
配置项
** 1、配置项 **
-
sectionsColor
可以为每一个section设置background-color属性$(document).ready(function(){ /*用sectionsColor 设置每个section的背景色 */ $('#fullPage').fullpage({ sectionsColor : ['red','blue','pink','gray'] }); }); controlArrows
定义是否可以通过箭头来 控制slide幻灯片，默认为true。当我们设置为false，则幻灯片左右两侧的箭头就会消失，在移动设备上，我们可以通过滑动来操作幻灯片。verticalCentered
每一页的内容是否垂直居中，默认为true。（一般保持默认值）resize
字体是否随着窗口缩放而缩放，默认为false.
