效果动图:
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- 1.导入fullpage插件,fullpage基于jq,所以要导入jq --> <link rel="stylesheet" href="./css/jquery.fullpage.min.css"> <script src="./lib/jquery-1.12.4.min.js"></script> <script src="./lib/jquery.fullpage.min.js"></script> </head> <body> <!-- 2.自创建页面结构 --> <div class="pageAll"> <!-- 这里的section命名是根据官方提供插件规则的命名 --> <div class="section">1</div> <div class="section">2</div> <div class="section">3</div> <div class="section">4</div> <div class="section">5</div> </div> </body> </html> <script> $(function(){ // 3.调用插件fullpage方法 $(".pageAll").fullpage({ //导航小圆点(在右侧) navigation: true, //sections的颜色,s不要漏了 sectionsColor: ["#00bfff", "#9acd32", "#ffa500", "#008000", "#87ceeb"], //进入某一屏会调用的函数(其中参数a不用,index代表第几屏,index从1开始) afterLoad:function(a,index){ // alert('当前是第'+index+'屏'); }, //离开某一屏会调用的函数(其中参数a,b不用) onLeave:function(index,a,b){ // alert('就要离开第'+index+'屏'); } }); }) </script>
fullpage.js插件地址>>>点击打开链接
在全屏滚动插件的基础上,做一个360滚动页面案例,案例地址>>>点我跳转