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.htmlhtml
全屏插件網頁中有詳細的介紹和案例能夠查看，這裏就很少介紹了jquery