效果动图:
代码:
<!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滚动页面案例,案例地址>>>点我跳转