1.fullpage.js地址
https://github.com/alvarotrigo/fullPage.js
2.fullpage.js基本配置
引入css文件和js文件
1 <script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
2 <script type="text/javascript" src="js/jquery.fullPage.min.js"></script>
3 <link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css">
fullpage.js依賴于jquery.js，所以一定要在其后引入
基本結構
1 <div id="fullpage">
2 <div class="section">Some section</div>
3 <div class="section">Some section</div>
4 </div>
初始化fullpage
1 <script>
2 $('#fullpage').fullpage();
3 </script>
3.fullpage原理 : 更改dom結構以及應用css動畫
4.fullpage常用參數配置
<script type="text/javascript">
$(document).ready(function(){
$('#fullpage').fullpage({
navigation :true, //圓點導航
navigationPosition :'right', //圓點導航位置left or right
navigationTooltips :['第一屏','第二屏','第三屏'], //圓點導航提示信息
showActiveTooltip :true, //圓點導航提示信息是否顯示
sectionsColor :['#f00', '#f40', '#f80'], //設置每一屏的背景色
anchors :['page1','page2','page3'], //設置錨點
menu :'#menu', //導航
verticalCentered :false, //設置元素是否垂直居中
paddingTop :'100px', //設置每一屏內容的內邊距
scrollingSpeed :1000, //設置切屏速度
});
});
</script>
5.fullpage常用的幾個方法
moveSectionUp() ?。?向上翻一屏 用法： $.fn.fullpage.moveSectionUp();
moveSectionDown() ： 向下翻一屏 用法： $.fn.fullpage.moveSectionDown();
moveTo(section, slide) ： 跳到指定的某一屏的某一個輪播頁 用法： $.fn.fullpage.moveTo('firstSlide', 2);
6.fullpagefullpage事件
onLeave: function(index, nextIndex, direction){}
當我們離開一個section后，會觸發一次此回調函數，函數接收indexnextIndex,direction三個參數
- index是離開頁面的序號，從1開始
- nextIndex是滾動到的目標頁面的序號，從1開始
- direction判斷往上滾動還是往下滾動，值是up或down
afterLoad: function(anchorLink, index){}
滾動到某一section，且滾動結束后，會觸發一次此回調函數，函數接收
anchorLink,index兩個參數
- anchorLink是錨鏈接的名稱，index是序號，從1開始計算
afterRender: function(){}
頁面結構生成后的回調函數，或者說頁面初始化完成后的回調函數
afterResize: function(){}
瀏覽器窗口尺寸改變后的回調函數
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){}
滾動到某一幻燈片后的回調函數，與afterLoad類似，接收
anchorLink, index, slideAnchor, slideIndex 4個參數
onSlideLeave: function(anchorLink, index, slideIndex, direction
在我們離開一個slide時，會觸發一次此回調函數，與onLeave類似，接收
anchorLink, index, slideIndex, direction 4個參數
