<title>fullPage.js — 绑定菜单演示_dowebok</title> <link type="text/css" href="https://www.jb51.net/css/jquery.fullPage.css"> <style> #menu { margin: 0; padding: 0; position: fixed; left: 10px; top: 10px; list-style-type: none; z-index: 70;} #menu li { float: left; margin: 0 10px 0 0; font-size: 14px;} #menu a { float: left; padding: 10px 20px; background-color: #fff; color: #333; text-decoration: none;} #menu .active a { color: #fff; background-color: #333;} .section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;} </style> <script src="https://www.jb51.net/js/jquery.min.js"></script> <script src="https://www.jb51.net/js/jquery.fullPage.js"></script> <script> $(function(){ $('#dowebok').fullpage({ sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'], //设置颜色参数 anchors: ['page1', 'page2', 'page3', 'page4'], //定义锚链接 menu: '#menu' //绑定菜单，设定的相关属性与 anchors 的值对应后，菜单可以控制滚动 }); }); </script> <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> <div> <h3>第一屏</h3> <p>fullPage.js — 绑定菜单演示</p> </div> <div> <h3>第二屏</h3> <p>请查看左上角，点击可以控制</p> </div> <div> <h3>第三屏</h3> <p>绑定的菜单没有默认的样式，你需要自行编写</p> </div> <div> <h3>第四屏</h3> <p>这是最后一屏</p> </div> </div>
0.06 项目导航演示
<script> $(function(){ $('#dowebok').fullpage({ sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'], //设置颜色属性 'navigation': true, //是否显示项目导航 默认值是false 需要设置true }); }); </script> <div> <div> <h3>第一屏</h3> <p>fullPage.js — 项目导航演示</p> </div> <div> <h3>第二屏</h3> <p>请查看右边的圆圈</p> </div> <div> <h3>第三屏</h3> <p>圆圈还可以设置位置，颜色，加上 tip，点击可以控制</p> </div> <div> <h3>第四屏</h3> <p>这是最后一屏</p> </div> </div>
0.07 自动循环滚动
<style> .section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;} </style> <div> <div> <h3>第一屏</h3> </div> <div> <h3>第二屏</h3> </div> <div> <h3>第三屏</h3> </div> <div> <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 设置横屏的自动播放