前期工作
** 1衡楞、在頁面引入 start **
- 插件最新版本2.6.7，需要先引入JQuery ( https://cdnjs.com/ 更新快，但是如果加載速度慢可以使用百度的靜態(tài)資源庫 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、基本結(jié)構(gòu) **
<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設(shè)置background-color屬性$(document).ready(function(){ /*用sectionsColor 設(shè)置每個section的背景色 */ $('#fullPage').fullpage({ sectionsColor : ['red','blue','pink','gray'] }); }); controlArrows
定義是否可以通過箭頭來 控制slide幻燈片炎滞，默認(rèn)為true敢艰。當(dāng)我們設(shè)置為false，則幻燈片左右兩側(cè)的箭頭就會消失册赛，在移動設(shè)備上钠导，我們可以通過滑動來操作幻燈片。verticalCentered
每一頁的內(nèi)容是否垂直居中森瘪，默認(rèn)為true牡属。（一般保持默認(rèn)值）resize
字體是否隨著窗口縮放而縮放，默認(rèn)為false.
