[TOC] > [github](https://github.com/alvarotrigo/fullPage.js) > [home 官方demo ](https://alvarotrigo.com/fullPage/zh/) ## 简单demo ``` <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.7/fullpage.min.css"> <style> div{ background-color:#ccc; } </style> <div id="fullpage"> <div class="section">Some section</div> <div class="section">Some section</div> <div class="section">Some section</div> <!-- active 锚点先定位到这一页 --> <div class="section active">Some section2222222222123132</div> <div class="section"> <!-- 懒加载 --> <img data-src="https://img.hellogithub.com/HelloGitHub/41/img/chart.xkcd.gif" alt=""> </div> <!-- 横向滚动 --> <div class="section"> <div class="slide"> Slide 1 </div> <div class="slide"> Slide 2 </div> <div class="slide"> Slide 3 </div> <div class="slide"> Slide 4 </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.7/fullpage.min.js"></script> <script> new fullpage('#fullpage', { //options here autoScrolling: true, scrollHorizontally: true }); //methods fullpage_api.setAllowScrolling(true); //允许鼠标滚动 </script> ``` ## 配置说明 ``` new fullpage('#fullpage', { sectionsColor: ['#4A6FB1'], 设置 sections 颜色 autoScrolling: true, //自动滚动 scrollHorizontally: true, scrollOverflow:true, //内容大于高度时,可在 此section 中滚动 scrollingSpeed: 1700, 滚动速度 }); fullpage_api.setAllowScrolling(true); //允许鼠标滚动 ``` ## 官方优秀实例 ### 背景图 > [demo](https://alvarotrigo.com/fullPage/examples/backgrounds.html) ### 固定背景图 > [demo](https://alvarotrigo.com/fullPage/examples/fixedBackgrounds.html) ### 全屏视频 > [demo](https://alvarotrigo.com/fullPage/examples/videoBackground.html)