使用說明

1、引入插件文件

這個(gè)插件依賴于jQuery，所以你還需要下載jQuery，并且在Fullpage插件之前引入。

如果你需要自定義頁面滾動(dòng)的效果，你需要引入jquery.easings.min.js文件。

對(duì)于內(nèi)容比較多的頁面，可以設(shè)置右側(cè)的滾動(dòng)條，但是默認(rèn)情況下無法滾動(dòng)，你需要jquery.slimscroll.min.js文件來自定義滑條滾動(dòng)效果。

最后，如果你不想下載到項(xiàng)目中，您可以使用開源項(xiàng)目CDN服務(wù)，F(xiàn)ullpage在CDNJS的地址：https://cdnjs.com/libraries/fullPage.js

2、編寫HTML代碼

默認(rèn)情況下，每一屏幕的代碼都需要有DIV包裹，并且設(shè)置DIV的類名為section，默認(rèn)情況下，第一個(gè)setion將作為首頁顯示在頁面上。

Some section
Some section
Some section
Some section

假如你需要讓某一個(gè)section作為首頁的第一屏展示，你只需要給這個(gè)section添加一個(gè)active的類，F(xiàn)ullpage會(huì)自動(dòng)優(yōu)先展示這個(gè)屏幕，例如定義下面的代碼：

Some section

Fullpage自帶左右滑動(dòng)的幻燈片，只需要在section中添加DIV元素，并且給DIV元素添加slide類，F(xiàn)Ullpage會(huì)自動(dòng)生成幻燈片特效，例如下面的代碼：

 Slide 1 
 Slide 2 
 Slide 3 
 Slide 4 

3、初始化Fullpage

使用jQuery的文檔加載完畢以后執(zhí)行函數(shù)，初始化Fullpage插件。

$(document).ready(function() {
$('#fullpage').fullpage();
});

所有的選項(xiàng)設(shè)置更復(fù)雜的初始化可能看起來像這樣：

$(document).ready(function() {
	$('#fullpage').fullpage({
		//Navigation
		menu: false,//綁定菜單，設(shè)定的相關(guān)屬性與anchors的值對(duì)應(yīng)后，菜單可以控制滾動(dòng)，默認(rèn)為false。
		anchors:['firstPage', 'secondPage'],//anchors定義錨鏈接，默認(rèn)為[]
		lockAnchors: false,//是否鎖定錨鏈接，默認(rèn)為false,設(shè)為true后鏈接地址不會(huì)改變
		navigation: false,//是否顯示導(dǎo)航，默認(rèn)為false
		navigationPosition: 'right',//導(dǎo)航小圓點(diǎn)的位置
		navigationTooltips: ['firstSlide', 'secondSlide'],//導(dǎo)航小圓點(diǎn)的提示
		showActiveTooltip: false,//是否顯示當(dāng)前頁面的tooltip信息
		slidesNavigation: true,//是否顯示橫向幻燈片的導(dǎo)航，默認(rèn)為false
		slidesNavPosition: 'bottom',//橫向?qū)Ш降奈恢茫J(rèn)為bottom，可以設(shè)置為top或bottom
		 
		//Scrolling
		css3: true,//是否使用CSS3 transforms來實(shí)現(xiàn)滾動(dòng)效果，默認(rèn)為true
		scrollingSpeed: 700,//設(shè)置滾動(dòng)速度，單位毫秒，默認(rèn)700
		autoScrolling: true,//是否使用插件的滾動(dòng)方式，默認(rèn)為true,若為false則會(huì)出現(xiàn)瀏覽器自帶滾動(dòng)條
		fitToSection: true,//設(shè)置是否自適應(yīng)整個(gè)窗口的空間，默認(rèn)值：true
		scrollBar: false,//是否包含滾動(dòng)條，默認(rèn)為false,若為true瀏覽器自帶滾動(dòng)條出現(xiàn)
		easing: 'easeInOutCubic',//定義頁面section滾動(dòng)的動(dòng)畫方式，若修改此項(xiàng)需引入jquery.easing插件
		easingcss3: 'ease',//定義頁面section滾動(dòng)的過渡效果，若修改此項(xiàng)需引入第三方插件
		loopBottom: false,//滾動(dòng)到最低部后是否連續(xù)滾動(dòng)到頂部，默認(rèn)為false
		loopTop: false,//滾動(dòng)到最頂部后是否連續(xù)滾動(dòng)到底部，默認(rèn)為false
		loopHorizontal: true,//橫向slide幻燈片是否循環(huán)滾動(dòng)，默認(rèn)為true
		continuousVertical: false,//是否循環(huán)滾動(dòng)，不兼容loopTop和loopBottom選項(xiàng)
		normalScrollElements: '#element1, .element2',//避免自動(dòng)滾動(dòng)，滾動(dòng)時(shí)的一些元素，例如百度地圖
		scrollOverflow: false,//內(nèi)容超過滿屏后是否顯示滾動(dòng)條，true則顯示滾動(dòng)條，若需滾動(dòng)查看內(nèi)容還需要jquery.slimscroll插件的配合
		touchSensitivity: 15,//在移動(dòng)設(shè)備中滑動(dòng)頁面的敏感性，默認(rèn)為5最高100，越大越難滑動(dòng)
		normalScrollElementTouchThreshold: 5,
		 
		//Accessibility
		keyboardScrolling: true,//是否可以使用鍵盤方向鍵導(dǎo)航，默認(rèn)為true
		animateAnchor: true,//錨鏈接是否可以控制滾動(dòng)動(dòng)畫，默認(rèn)為true,若為false則錨鏈接定位失效
		recordHistory: true,//是否記錄歷史，默認(rèn)為true,瀏覽器的前進(jìn)后退可導(dǎo)航。若autoScrolling:false,那么這個(gè)屬性將被關(guān)閉
		 
		//Design
		controlArrows: true,//定義是否通過箭頭來控制slide,默認(rèn)true
		verticalCentered: true,//定義每一頁的內(nèi)容是否垂直居中，默認(rèn)true
		resize : false,//字體是否隨窗口縮放而縮放，默認(rèn)false
		sectionsColor : ['#ccc', '#fff'],//為每個(gè)section設(shè)置background-color屬性
		paddingTop: '3em',設(shè)置每一個(gè)section頂部的padding,默認(rèn)為0
		paddingBottom: '10px',設(shè)置每一個(gè)section底部的padding,默認(rèn)為0
		fixedElements: '#header, .footer',固定元素，默認(rèn)為null,需要配置一個(gè)jquery選擇器，在頁面滾動(dòng)時(shí)，fixElements設(shè)置的元素不滾動(dòng)
		responsiveWidth: 0,
		responsiveHeight: 0,
		 
		//Custom selectors
		sectionSelector: '.section',//section選擇器。默認(rèn)為.section
		slideSelector: '.slide',//slide選擇器，默認(rèn)為.slide
		 
		//events
		onLeave: function(index, nextIndex, direction){},
		afterLoad: function(anchorLink, index){},
		afterRender: function(){},
		afterResize: function(){},
		afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
		onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}
	});
});