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>
时间： 2024-10-08 10:44:06