首页 > 代码库 > fullpage.js 基本配置

fullpage.js 基本配置

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

2.fullpage基本配置

 

引入css文件和js文件

1 <script src="jquery.js"></script>
2 <script src="jquery.fullpage.js"></script>
3 <link rel="stylesheet" href="jquery.fullpage.css">

基本结构

1 <div id="fullpage"> 
2     <div class="section">Some section</div> 
3     <div class="section">Some section</div> 
4 </div>

初始化fullpage

1 <script>
2     $(#fullpage).fullpage();
3 </script>

3.fullpage原理 : 更改dom结构以及应用css动画

4.fullpage常用参数配置

 1 <script type="text/javascript">
 2         $(#fullpage).fullpage({
 3             navigation           :true,                             //圆点导航
 4             navigationPosition   :right,                         //圆点导航位置left or right
 5             navigationTooltips   :[第一屏,第二屏,第三屏],      //圆点导航提示信息
 6             showActiveTooltip    :true,                             //圆点导航提示信息是否显示
 7             sectionsColor        :[#f00, #f40, #f80],         //设置每一屏的背景色
 8             anchors              :[page1,page2,page3],        //设置锚点
 9             menu                 :#menu,                          //导航
10             verticalCentered     :false,                            //设置元素是否垂直居中
11             paddingTop           :100px,                          //设置每一屏内容的内边距
12             scrollingSpeed       :1000,                             //设置切屏速度
13         });
14 </script>

5.设置menu 

menu:"#menu"

1)加结构

1 <ul id="menu">
2     <li data-menuanchor="page1"><a href="#page1">第一页</a></li>
3     <li data-menuanchor="page2"><a href="#page2">第二页</a></li>
4 </ul>

2)加样式

6.水平轮播

1 <div class="section">第一屏</div>
2 <div class="section">
3     <div class="slide"> Slide 1 </div>
4     <div class="slide"> Slide 2 </div>
5     <div class="slide"> Slide 3 </div>
6     <div class="slide"> Slide 4 </div>
7 </div>
8 <div class="section">第三屏</div>

7.懒加载

这个功能默认是处于打开状态的. lazyLoading: true

使用:

1 <img data-src="image.png"> 
2 <video> 
3     <source data-src="video.webm" type="video/webm" /> 
4     <source data-src="video.mp4" type="video/mp4" /> 
5 </video>

8.fullpage常用的几个方法

moveSectionUp()     : 向上翻一屏 用法: $.fn.fullpage.moveSectionUp();

moveSectionDown()    : 向下翻一屏 用法: $.fn.fullpage.moveSectionDown();

moveTo(section, slide)    : 跳到指定的某一屏的某一个轮播页 用法: $.fn.fullpage.moveTo(‘firstSlide‘, 2);

9.fullpage事件

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){}

10.demo

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>fullpage基本使用</title>
 5     <meta charset="utf-8" />
 6     <!-- 引入 jquery.js jquery.fullpage.js jquery.fullpage.css 三个文件 -->
 7     <script type="text/javascript" src="jquery.js"></script>
 8     <script type="text/javascript" src="jquery.fullpage.js"></script>
 9     <link rel="stylesheet" type="text/css" href="jquery.fullpage.css">
10     <style type="text/css">
11         #menu{
12             position: fixed;
13             height: 40px;
14             width: 100%;
15             top: 0px;
16             background-color: #fff;
17         }
18         ul,li{
19             padding: 0;
20             margin: 0;
21         }
22         #menu li{
23             display: inline-block;
24             margin: 0 15px;
25         }
26         #menu li.active{
27             background-color: blue;
28         }
29         .page1 img{
30             opacity: 0;
31             transition: opacity 5s;
32         }
33         .page1 .on1{
34             opacity: 1;
35         }
36     </style>
37 </head>
38 <body>
39 
40     <!-- fullpage基本结构 整体有一个外部容器 每一屏有一个section类 -->
41     <div id="fullpage">
42         <div class="section page1">
43             <img data-src="yuanxiao.jpg" />
44         </div>
45         <!-- 懒加载(默认开启状态)设置 src改成data-src即可 -->
46         <div class="section"> <img data-src="yuanxiao.jpg" /></div>
47         <div class="section"> 
48             <!-- 水平轮播 -->
49             <div class="slide">slide 1</div>
50             <div class="slide">slide 2</div>
51             <div class="slide">slide 3</div>
52         </div>
53     </div>
54 
55     <!-- 导航 -->
56     <ul id="menu">
57         <li data-menuanchor="page1"><a href="#page1">第一页</a></li>
58         <li data-menuanchor="page2"><a href="#page2">第二页</a></li>
59         <li data-menuanchor="page3"><a href="#page3">第三页</a></li>
60     </ul>
61 
62     <!-- 初始化fullpage -->
63     <script type="text/javascript">
64         $(#fullpage).fullpage({
65             navigation           :true,                            //圆点导航
66             navigationPosition   :right,                        //圆点导航位置left or right
67             navigationTooltips   :[第一屏,第二屏,第三屏],    //圆点导航提示信息
68             showActiveTooltip    :true,                            //圆点导航提示信息是否显示
69             sectionsColor        :[#f00, #f40, #f80],        //设置每一屏的背景色
70             anchors              :[page1,page2,page3],    //设置锚点
71             menu                 :#menu,                        //导航
72             verticalCentered     :false,                        //设置元素是否垂直居中
73             paddingTop           :100px,                        //设置每一屏内容的内边距
74             scrollingSpeed       :1000,                            //设置切屏速度
75             onLeave              : function(index, nextIndex, direction) {
76                 if(index == 1) {
77                     $(".page1 img").removeClass("on1");
78                 }
79                 console.info("onLeave:当前:"+index+"下一屏:"+nextIndex+"方向:"+direction);
80             },
81             afterLoad            : function(anchorLink, index) {
82                 if(index == 1){
83                     $(".page1 img").addClass("on1");
84                 }
85                 console.info("afterLoad:当前:"+index+",anchorLink:"+anchorLink);
86             },
87 
88         });
89     </script>
90 
91 </body>
92 </html>

 

fullpage.js 基本配置