本人做的效果：
PC端：http://demo.qpdiy.com/hxw/ss/h/index.html
移動端：http://demo.qpdiy.com/hxw/ss/h/s.html
首先使用要引入插件
<link rel="stylesheet" href="../c/jquery.fullPage.css" media="all"/> <script type="text/javascript" src="../j/lib/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../j/lib/jquery.easings.min.js"></script> <script type="text/javascript" src="../j/lib/jquery.fullPage.js"></script>
HTML代碼
|
1
2
3
4
5
6
7
8
9
10
11
|
<
div
id="fullpage">
<
div
class="section">第一屏</
div
>
<
div
class="section">第二屏</
div
>
<
div
class="section">
<
div
class="slide">第三屏的第一屏</
div
>
<
div
class="slide">第三屏的第二屏</
div
>
<
div
class="slide">第三屏的第三屏</
div
>
<
div
class="slide">第三屏的第四屏</
div
>
</
div
>
<
div
class="section">第四屏</
div
>
</
div
>
|
JavaScript
|
1
2
3
|
$(
function
(){
$(
'#fullpage'
).fullpage();
});
|
通過JS可對插件常見參數進行配置，如：
//定義錨鏈接
anchors: ['page1', 'page2', 'page3', 'page4'],
// 是否顯示項目導航
navigation: true,
navigationTooltips: ['首頁', '二', '三', '四'],
navigationColor: '#000',
navigationPosition: 'left',
// 滾動到最底部后是否滾回頂部
loopBottom: true,
// 每一屏底色
sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', '#EAE1C0'],
// 是否顯示左右滑塊的項目導航
slidesNavigation: true,
// 左右滑塊的箭頭的背景顏色
controlArrowColor: 'yellow',
// 左右滑塊是否循環滑動
loopHorizontal: false,
//禁止使用CSS3進行頁面切換，改用JS，默認是ture。經試驗發現FF中如果用CSS3切換的話視頻會放不出來（除第一屏）
css3:false,
// 離開某一屏的回調函數
onLeave: function(index, nextIndex, direction) {
console.log(index, nextIndex, direction);
if (index == 3 && nextIndex == 4) {
console.log('向下滑動')
}
}
值得說明一下的是 menu: true只有在HTML定義了以下內容的時候才會起效果。
<ul id="myMenu" style="position:fixed;top:100px;">
<li data-menuanchor="firstPage" class="active"><a href="#page1">First section</a></li>
<li data-menuanchor="secondPage"><a href="#page2">Second section</a></li>
<li data-menuanchor="thirdPage"><a href="#page3">Third section</a></li>
<li data-menuanchor="fourthPage"><a href="#page4">Fourth section</a></li>
</ul>
可見即可通過JS配置導航，也可先寫好導航再倒入到插件中
詳細參考資料：
官網：https://github.com/alvarotrigo/fullPage.js
中文版：http://www.dowebok.com/77.html
使用參考網站：