地址详情～https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese#fullpagejs
需要引入的插件-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.6/jquery.fullpage.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.6/jquery.fullpage.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.js"></script>
下面是需要的基本html～
div id="fullpage">
<div class="section">第一屏</div>
<div class="section">
<div class="slide">silde1</div>
<div class="slide">silde2</div>
<div class="slide">silde3</div>
<div class="slide">silde4</div>
</div>
<div class="section section3"><h1>第三屏</h1></div>
<div class="section">第四屏</div>
</div>
<!--<ul id="fullpageMenu">
这是一个头部的导航栏 在css中设置定位在jquery中设置menu：'fullpageMenu'即可
<li data-menuanchor="page1" class="active"><a href="#page1">1 section</a></li>
<li data-menuanchor="page2" class="active"><a href="#page2">2 section</a></li>
<li data-menuanchor="page3" class="active"><a href="#page3">3 section</a></li>
<li data-menuanchor="page4" class="active"><a href="#page4">4 section</a></li>
</ul>-->
<!--给section的div加上active则是定义首页-->
js～
<script>
$(document).ready(function(){
$('#fullpage').fullpage({
sectionsColor:['cadetblue','#FFCC00','bisque','chartreuse'],
// controlArrows:false, 使slide轮播效果在pc端左右箭头消失,在手机端可以滑动
// verticalCentered:false, 默认为true，是否是内容垂直居中
// resize:true, 默认为false,字体是否随着窗口缩放而缩放
// scrollingSpeed:700 滚动速度,每个页面之间的切换,单位为毫秒,默认为700毫秒
anchors:['page1','page2','page3','page4'],
// 给每个section链接地址后面加上相应的后缀
loopTop:true,
// 默认为true，禁止之后section不可上下循环轮播
loopBottom:true,
// 默认为true，禁止之后section不可上下循环轮播
loopHorizontal:true,
// 默认为true,禁止后slideu轮播图不可左右循环轮播
// autoScrolling:true, 默认为true,如果选择false,则会出现浏览器自带的滚动条
// scrollBar:false, 默认为false,如果为true,则浏览器滚动条出现,单身页面滚动还是按页滚动
paddingTop:'100px',
paddingBottom:'100px',
// fixedElements: 固定的元素,需要在jquery中设置,在页面滚动的时候才会固定不动
// continuousVertical:false, 默认为false,如果ture,则动态效果和loopTop不同,不可重复设置
recordHistory:true,
// 默认为true,可让浏览器的前进后退发挥功效,不需要则不设置即可
// menu:'fullpageMenu',
navigation:true,
// 1,默认为false,是否显示
navigationPosition:'right',
// 2,设置小圆点菜单的位置
navigationTooltips:['page1','page2','page3','page4'],
// 3,设置菜单小圆点的提示
showActiveTooltip:true,
// 默认为false,true时显示当前页面信息
slidesNavigation:true,
// 是否现实slides轮播图的导航
slidesNavPosition:'bottom',
// slides轮播图导航的位置
// scrollOverflow:false, 默认为false,若需要为true,则需要应用jqyery.slimscroll插件即可
// sectionSelector:section的选择器,默认为.section
// slideSelector:slide的选择器,默认为.slide
});
});
</script>
