fullpages全屏滚动事件

地址详情～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>