1 2
 3 //jquery
 4 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
 5
 6 //fullpage插件
 7 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.js"></script>
 8
 9 //滚动条插件
10 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/vendors/jquery.slimscroll.min.js"></script>
11
12 //fullpage.css
13 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.css">

1 <div id="fullpage">
2         <div class='section'>第一页</div>
3         <div class='section'>第二页</div>
4         <div class='section'>第三页</div>
5         <div class='section'>第四页</div>
6 </div>    

<div class='section'><div class='slide'>第一张幻灯片</div><div class='slide'>第一张幻灯片</div><div class='slide'>第一张幻灯片</div>
</div>

1 $(function(){
2     $('#fullpage').fullpage({
3             //API接口
4     })
5 })

 1             //配置背景颜色
 2             sectionsColor:['red','#f04','#9b0','#d3f'],
 3
 4             //配置幻灯片切换是否显示箭头，默认true
 5             controlArrows:false,
 6
 7             //配置每页内容页面是否垂直居中，默认false
 8             verticalCentered:true,
 9
10             //配置文字是否随着窗口变化而变化，默认false
11             resize:true,
12
13             //配置页面滚动速度,默认700
14             scrollingSpeed:1000,
15
16             //配置锚链接，不应该和autoScrolling，scrollBar一起使用
17             anchors:['page1','page2','page3','page4'],
18
19             //配置锚点切换时候是否有过度动画，默认true
20             animateAnchor:false,
21
22             //锁定配置的锚链接是否显示，默认false
23             lokAnchors:true,
24
25             //配置动画由css3还是jquery来执行，默认true
26             css3:true,
27
28             //配置滚动到顶部之后是否从底部循环滚动，默认false
29             loopTop:true,
30
31             //相反从底部循环滚动，默认false
32             loopBottom:true,
33
34             //设置页面是否循环滚动与loopTop，loopBottom不兼容,默认是false
35             continuousVertical:true,
36
37             //幻灯片是否循环滚动，默认true
38             loopHorizontal:false,
39
40             //配置是否按照插件的方式来进行滚动，默认true,和锚点不应该一起使用，一般不设置或者保持默认
41             autoScrolling:true,
42
43             //滚动的时候是否包含滚动条,默认false,和锚点不应该一起使用，一般不设置或者保持默认
44             scrollBar:false,
45
46             //配置页面上下间距，默认0，如果需要设置固定顶部和顶部菜单导航配合使用
47             // paddingTop：'300px',
48             paddingBottom:0,
49
50             //配置页面是否有固定的DOM
51             fixedElements:'#header',
52
53             //配置是否支持键盘方向键控制页面切换，默认true
54             keyboardScrolling:true,
55
56             //配置是否激活浏览器前进后退功能，如果页面设置了不按照插件的方式来滚动该配置也失效，默认true
57             recordHistory:true,
58
59             //配置菜单
60             menu:'#fullpageMenu',
61
62             //配置导航,位置，提示,显示当前位置
63             navigation:true,
64             navigation:'right',
65             navigationTooltips:['page1','page2','page3','page4'],
66             showActiveTooltip:true,
67
68             //配置幻灯片是否显示导航,和位置
69             slidesNavigation:true,
70             slidesNavPosition:'bottom',
71
72             //配置内容超过容器是否显示滚动条，模式true,
73             scrollOverflow:true,
74
75             //修改section和幻灯片默认CLASS
76             sctionSelector:
77             slideSelector: