jQuery fullPage插件

1.簡介

 fullPage.js 是一個基於jQuery的插件，它可以很方便、很輕鬆的製做出全屏網站。fullPage屬於jquery很經常使用的插件，雖然目前不少web應用用react開發，但功能較少的web仍是用jQuery吧。

• 支持鼠標滾動
• 支持前進後退和鍵盤控制
• 多個回調函數
• 支持手機、平板觸摸事件
• 支持 CSS3 動畫
• 支持窗口縮放
• 窗口縮放時自動調整
• 可設置滾動寬度、背景顏色、滾動速度、循環選項、回調、文本對齊方式等等

1. 使用

（1）引入插件文件這個插件依賴於jQuery，因此你還須要下載jQuery，而且在Fullpage插件以前引入。

<link href="https://cdn.bootcss.com/fullPage.js/2.9.4/jquery.fullpage.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/fullPage.js/2.9.4/jquery.fullpage.min.js"></script>

若是你須要自定義頁面滾動的效果，你須要引入jquery.easings.min.js文件。

<script src="https://cdn.bootcss.com/fullPage.js/2.9.4/vendors/jquery.easings.min.js"></script>

對於內容比較多的頁面，能夠設置右側的滾動條，可是默認狀況下沒法滾動，你須要jquery.slimscroll.min.js文件來自定義滑條滾動效果。

<script src="https://cdn.bootcss.com/fullPage.js/2.9.3/vendors/scrolloverflow.min.js"></script>

（2）編寫HTML代碼

默認狀況下，每一屏幕的代碼都須要有DIV包裹，而且設置DIV的類名爲section，默認狀況下，第一個setion將做爲首頁顯示在頁面上。假如你須要讓某一個section做爲首頁的第一屏展現，你只須要給這個section添加一個active的類，fullPage會自動優先展現這個屏幕，fullPage自帶左右滑動的幻燈片，只須要在section中添加DIV元素，而且給DIV元素添加slide類，fullPage會自動生成幻燈片特效。

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

（3）初始化Fullpage

$(document).ready(function() {

$('#fullpage').fullpage();

});