前期工作

---

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