1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 /*交集选择器:h3当当前元素同时添加了second和current的样式的时候才有效果*/ 8 .first.current h3{ 9 font-size: 100px; 10 } 11 </style> 12 <!--因为这个全屏插件是基于jquery的，所以要在导入前先导入jquery--> 13 <script src="../js/jquery-3.4.1.js"></script> 14 <script src="../js/jquery.fullPage.min.js"></script> 15 </head> 16 <body> 17 <div id="dowebok"> 18 <div class="section first"> 19 <h3>第一屏</h3> 20 </div> 21 <div class="section second"> 22 <h3>第二屏</h3> 23 </div> 24 <div class="section"> 25 <h3>第三屏</h3> 26 </div> 27 <div class="section"> 28 <h3>第四屏</h3> 29 </div> 30 </div> 31 <script> 32 $(function(){ 33 $('#dowebok').fullpage({ 34 /*设置每一屏的背景颜色*/ 35 sectionsColor:["red","green","blue","pink"], 36 /*当滚动到某一屏之后调用 37 * index:当前屏的索引，索引从1开始 38 * */ 39 afterLoad:function (anchorLink,index) { 40 $(".section").removeClass("current"); 41 alert(index); 42 /*加样式， 当滚动到某一屏之后，为元素添加样式 -- 标记*/ 43 $(".section").eq(index-1).addClass("current"); 44 } 45 }); 46 }); 47 </script> 48 </body> 49 </html>
全屏插件下载地址：http://www.dowebok.com/77.html
全屏插件网页中有详细的介绍和案例可以查看，这里就不多介绍了