<li data-menuanchor="page4"><a href="#page4">第四屏</a></li>
</ul>
<div id="dowebok">
<div class="section">
<h3>第一屏</h3>
<p>fullPage.js — 绑定菜单演示</p>
</div>
<div class="section">
<h3>第二屏</h3>
<p>请查看左上角，点击可以控制</p>
</div>
<div class="section">
<h3>第三屏</h3>
<p>绑定的菜单没有默认的样式，你需要自行编写</p>
</div>
<div class="section">
<h3>第四屏</h3>
<p>这是最后一屏</p>
</div>
</div>
0.06 项目导航演示
<script>
$(function(){
$('#dowebok').fullpage({
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
//设置颜色属性
'navigation': true,
//是否显示项目导航 默认值是false 需要设置true
});
});
</script>
<div id="dowebok">
<div class="section">
<h3>第一屏</h3>
<p>fullPage.js — 项目导航演示</p>
</div>
<div class="section">
<h3>第二屏</h3>
<p>请查看右边的圆圈</p>
</div>
<div class="section">
<h3>第三屏</h3>
<p>圆圈还可以设置位置，颜色，加上 tip，点击可以控制</p>
</div>
<div class="section">
<h3>第四屏</h3>
<p>这是最后一屏</p>
</div>
</div>
0.07 自动循环滚动
<style>
.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}
</style>
<div id="dowebok">
<div class="section">
<h3>第一屏</h3>
</div>
<div class="section">
<h3>第二屏</h3>
</div>
<div class="section">
<h3>第三屏</h3>
</div>
<div class="section">
<h3>第四屏</h3>
</div>
</div>
<script>
$(function(){
$('#dowebok').fullpage({
sectionsColor : ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
//设置颜色属性
continuousVertical: true
//设置是否循环滚动，与 loopTop 及 loopBottom 不兼容 默认是false
});
setInterval(function(){ //定时器 三秒一执行
$.fn.fullpage.moveSectionDown(); //向下滚动
}, 3000);
});
</script>
0.08 设置横屏的自动播放
