fullpage.js自定义导航
我们都知道怎么使用fullpage.js。主要是下面的命令来控制导航的
$(function(){
$('#fullpage').fullpage({
//默认navigation: false //不显示项目导航 通过下面这句可以控制将导航加入到页面上
'navigation': true,
})
})
但是，如果我们想要自己定义导航呢？不使用他提供的一些css属性，自己写好html和css基本样式，通过滚动显示页码？搜索大量资料，看到以下博客，通过该方法确实可以实现的，即使不指定css3动画翻页也可以。【在火狐、ie7-9、谷歌、360下调试】360的兼容模式不行。
演示地址： http://runjs.cn/detail/x1jdppsz
点击演示屏右下角的全屏查看，可以更直观的查看效果，点击查看源码可以查看我demo是怎么实现的
原博客地址：http://blog.163.com/hongshaoguoguo@126/blog/static/18046981201481504334743/
具体做法如下：
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="style/jquery.fullPage.css" rel="stylesheet" type="text/css" />
<link href="style/base.css" rel="stylesheet" type="text/css" />
<link href="style/index.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.fullPage.min.js"></script>
</head>
<body>
<div id="superContainer">
<div class="fp-section" style=" background:#069;"></div>
<div class="fp-section" style=" background:#099"></div>
<div class="fp-section" style=" background:#963;"></div>
<div class="fp-section" style=" background:#633;"></div>
</div>
<div id="menu" class="right">
<ul>
<li data-menuanchor="page1">
<a href="#page1"></a>
</li>
<li data-menuanchor="page2">
<a href="#page2"></a>
</li>
<li data-menuanchor="page3">
<a href="#page3"></a>
</li>
<li data-menuanchor="page4">
<a href="#page4"></a>
</li>
</ul>
</div>
</body>
</html>
<script>
$(function(){
$('#superContainer').fullpage({
slidesColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
anchors: ['page1', 'page2', 'page3', 'page4'],
css3: false,
menu: "#menu"
});
});
</script>
@charset "utf-8";
/* CSS Document */
.wrapper{ width:660px; height:200px; margin:0 auto; padding-top:60px; position:relative; }
.wrapper div{ width:200px; height:200px; line-height:200px; font-size:24px; color:#fff; text-align:center; }
.bor02:hover{ width:300px; height:300px; transform:rotate(360deg); background:#099; left:150px; top:30px;}
#menu{ position: fixed; top: 50%; margin-top: -32px;}
#menu.right{ right: 10px;}
#menu ul li{ width: 10px; height: 10px; background: #ccc; margin:10px; border-radius: 10px;}
#menu li.active{ background:#000; }
当然，首先是要下载fullpage.js插件，引入到自己的项目里头。