fullPage下载地址https://github.com/alvarotrigo/fullPage.js/archive/master.zip

fullPage    github地址https://github.com/alvarotrigo/fullPage.js/

工具下载方法

// With bower
bower install fullpage.js

// With npm
npm install fullpage.js

Optional use of CDN   cdn引用地址

If you prefer to use a CDN to load the needed files, fullPage.js is in CDNJS: https://cdnjs.com/libraries/fullPage.js

上手

首先要有一个div作为所有元素的父级

<div id="fullPage"></div>  这个id不能给body 

如果想要其他的页面首先显示出来，可以给这个页面添加active类名

如果想要在其他页面写一个banner可以这样

接下来一个必要的js就写上就可以看看效果了

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

更多的扩展参数

$(document).ready(function() {
	$('#fullpage').fullpage({
		//Navigation
		menu: '#menu',
		lockAnchors: false,
		anchors:['firstPage', 'secondPage'],
		navigation: false,
		navigationPosition: 'right',
		navigationTooltips: ['firstSlide', 'secondSlide'],
		showActiveTooltip: false,
		slidesNavigation: false,
		slidesNavPosition: 'bottom',

		//Scrolling
		css3: true,
		scrollingSpeed: 700,
		autoScrolling: true,
		fitToSection: true,
		fitToSectionDelay: 1000,
		scrollBar: false,
		easing: 'easeInOutCubic',
		easingcss3: 'ease',
		loopBottom: false,
		loopTop: false,
		loopHorizontal: true,
		continuousVertical: false,
		continuousHorizontal: false,
		scrollHorizontally: false,
		interlockedSlides: false,
		dragAndMove: false,
		offsetSections: false,
		resetSliders: false,
		fadingEffect: false,
		normalScrollElements: '#element1, .element2',
		scrollOverflow: false,
		scrollOverflowReset: false,
		scrollOverflowOptions: null,
		touchSensitivity: 15,
		normalScrollElementTouchThreshold: 5,
		bigSectionsDestination: null,

		//Accessibility
		keyboardScrolling: true,
		animateAnchor: true,
		recordHistory: true,

		//Design
		controlArrows: true,
		verticalCentered: true,
		sectionsColor : ['#ccc', '#fff'],
		paddingTop: '3em',
		paddingBottom: '10px',
		fixedElements: '#header, .footer',
		responsiveWidth: 0,
		responsiveHeight: 0,
		responsiveSlides: false,
		parallax: false,
		parallaxOptions: {type: 'reveal', percentage: 62, property: 'translate'},

		//Custom selectors
		sectionSelector: '.section',
		slideSelector: '.slide',

		lazyLoading: true,

		//events
		onLeave: function(index, nextIndex, direction){},
		afterLoad: function(anchorLink, index){},
		afterRender: function(){},
		afterResize: function(){},
		afterResponsive: function(isResponsive){},
		afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
		onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}
	});
});

如果想添加锚点跳转，可以这样

js里添加一个这样的属性

$(document).ready(function() {
	$('#fullpage').fullpage({
		anchors:['firstPage', 'secondPage', 'thirdPage']
	});
});

在section里加入属性data-anchor js里不写这个属性也能实现这个效果

如果想跳转到制定页面的制定轮播位置可以

切记data-anchor的属性值不能和其他元素的id名一样！！！

如果想要你的section是小的可以添加class

<div class="section">Whole viewport</div>
<div class="section fp-auto-height">Auto height</div>

如果想要section的高度是响应式的可以添加class fp-auto-height-responsive

图片的延时加载也是可以做到的

images, videos and audio都支持延时,如果已经使用了其他的延时工具可以在js中加入lazyLoading: false

<img data-src="image.png">
<video>
	<source data-src="video.webm" type="video/webm" />
	<source data-src="video.mp4" type="video/mp4" />
</video>

Auto play/pause embedded media

媒体标签的自动播放在部分机型上会不能用

Note: the autoplay feature might not work on some mobile devices depending on the OS and browser (i.e. Safari on iOSversion < 10.0).

媒体的自动播放可以使用标签自己的属性，也可以使用data-autoplay

<audio data-autoplay>
	<source src="http://metakoncept.hr/horse.ogg" type="audio/ogg">
</audio>

当桌面换到非媒体板块时可以使用data-keepplaying让媒体保持继续播放

<audio data-keepplaying>
	<source src="http://metakoncept.hr/horse.ogg" type="audio/ogg">
</audio>

State classes added by fullpage.js

Fullpage.js adds multiple classes in different elements to keep a record of the status of the site:

• active is added the current visible section and slide.
• active is added to the current menu element (if using the menu option).
• A class of the form fp-viewing-SECTION-SLIDE is added to the body element of the site. (eg: fp-viewing-secondPage-0) The SECTION and SLIDE parts will be the anchors (or indexes if no anchor is provided) of the current section and slide.
• fp-responsive is added to the body element when the entering in the responsive mode
• fp-enabled is added to the html element when fullpage.js is enabled. (and removed when destroyed).
• fp-destroyed is added to the fullpage.js container when fullPage.js is destroyed.
• fp-enabled is added to the html element once the libary is initalized.