实例代码下载
- <!DOCTYPE html>
- <html lang="zh-CN">
- <head>
- <meta charset="utf-8">
- <title>fullPage.js — 基本演示_手册网</title>
- <link rel="stylesheet" href="/api/jq/5733e33232116/css/jquery.fullPage.css">
- <style>
- .section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}
- </style>
- <script src="/api/jq/5733e33232116/js/jquery-1.8.3.min.js"></script>
- <script src="/api/jq/5733e33232116/js/jquery.fullPage.min.js"></script>
- <script>
- $(function(){
- $('#sucaihuo').fullpage({
- sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90']
- });
- });
- </script>
- </head>
- <body>
- <div id="sucaihuo">
- <div class="section">
- <h3>第一屏</h3>
- <p>fullPage.js — 基本演示</p>
- </div>
- <div class="section">
- <div class="slide"><h3>第二屏的第一屏</h3></div>
- <div class="slide"><h3>第二屏的第二屏</h3></div>
- <div class="slide"><h3>第二屏的第三屏</h3></div>
- </div> 下载
- <div class="section">
- <h3>第三屏</h3>
- </div>
- <div class="section">
- <h3>第四屏</h3>
- <p>这是最后一屏</p>
- </div>
- </div>
- <a href="#" style="display: none;">sucaihuo</a>
- <a href="#" style="display: none;">jQuery全屏滚动插件fullPage.js</a>
- </body>
- </html>