fullpages全屏滚动事件
需要引⼊的插件-
<link rel="stylesheet" href="cdnjs.cloudflare/ajax/libs/fullPage.js/2.9.6/jquery.fullpage.css" /> <script src="cdnjs.cloudflare/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="cdnjs.cloudflare/ajax/libs/fullPage.js/2.9.6/jquery.fullpage.js"></script>
<script src="cdnjs.cloudflare/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({
jquery滚动条滚动到底部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>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论