fullpage插件的使用（内有下载插件地址）

最新推荐文章于 2024-05-11 02:49:02 发布

web_sea

最新推荐文章于 2024-05-11 02:49:02 发布

阅读量2.8k

点赞数

分类专栏：适合初学者

本文链接：https://blog.csdn.net/weixin_43513495/article/details/83377760

版权

适合初学者专栏收录该内容

6 篇文章 1 订阅

订阅专栏

简介
fullPage.js是一个基于jQuery的全屏滚动插件，它能够很方便、很轻松的制作出全屏网站
主要功能

支持鼠标滚动
多个回调函数
支持手机、平板触摸事件
支持 CSS3 动画
窗口缩放时自动调整
可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等

下载fullpage地址
(https://github.com/alvarotrigo/fullPage.js)

使用方法
引入文件
fullpage自己的css库文件
jQuery（版本1.6.0+）
Fullpage自己的js文件
其他扩展库（jquery.easings.min.js等）

这是在自己的文件内需要引入的东西
在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>fullpage和Echarts</title>
	<link rel="stylesheet" href="css/fullpage.min.css">//引入fullpage的css
	<script src="js/jquery-1.12.4.js"></script>//只支持jQuery（版本1.6.0+）
	<script src="js/fullpage.min.js"></script>//引入fullpage的js
	<!-- <script src="js/echarts.min.js"></script> -->
	<script src="js/myjs.js"></script>//自己的js的引入要写在最后面。
	<style>
		#box{
			margin: 50px auto;
			background-color: black;
		}
	</style>
</head>
<body>
	<div id="main"> //id名随便取
		<div class="section">这是第1屏</div>//这个class名不能随便
		<div class="section">
			<div class="slide">第二屏的第1张幻灯片</div>
			<div class="slide">
				<div id="box" style="width:900px;height:500px;">
					
				</div>
			</div>
			<div class="slide">第二屏的第3张幻灯片</div>
			<div class="slide">第二屏的第4张幻灯片</div>
		</div>
		<div class="section">这是第3屏</div>
		<div class="section">这是第4屏</div>
	</div>
</body>
<script>
	 $('#fullpage').fullpage();  //fullpage括号内通过json格式添加配置项。
	 //以下是演示
	 $("#main").fullpage({
		sectionsColor:["red","pink","yellow","green"],
		controlArrows:true,
		navigation:true,
	});
</script>
</html>

配置项
sectionsColor：可以为每一个section设置背景色
controlArrows: 定义是否通过箭头来控制slide幻灯片，默认为true，当我们设置为false，幻灯片两侧的箭头会消失，在移动设备上可以通过滑动来操作幻灯片
navigation: 是否显示导航，默认为false，如果设置成true，会显示小圆点，作为导航
navigationPosition: 导航小圆点的位置，可以设置为left或者right
navigationTooltips: 导航小圆点的tooltips设置，默认是[]，注意按照顺序设置
showActiveTooltip: 是否显示当前页面的导航的tooltip信息，默认为false；

方法调用方式：

$.fn.fullpage.方法名
方法
moveSectionUp(): 向上滚动一页
moveSectionDown(): 向下滚动一页
moveTo（section，slide）: 滚动到第几页，第几个幻灯片，注意，页面是从1开始，而幻灯片是从0开始计算
silentMoveTo(section,slide) : 滚动到第几页，和moveTo一样，但是没有动画效果

回调函数

afterRender（）：页面结构生成后的回调函数，或者说页面初始化完成后的回调函数
onLeave(index,nextIndex,direction) 在我们离开一个section时，会触发一次此回调函数，接收index，nextIndex和direction3个参数
index：是离开的页面的序号，从 1 开始，
nextIndex：是滚动到的目标页面的序号,从 1 开始
direction：判断向上滑动还是往下滑动，值是 up 或者 down

<script type="text/javascript">
			var full = $("#fullpage").fullpage({
				//设置每屏的颜色
				sectionsColor:["green","pink","blue","yellow"],
				//是否通过箭头控制幻灯片
				controlArrows:true,
				//是否显示导航
				navigation:true,
				//位置
				navigationPosition:"left",
				//导航提示信息
				navigationTooltips:["01","02","03","04"],
				//是否显示当前导航的提示信息
				showActiveTooltip:true,
				afterRender:function(index,nextIndex,direction){  //这就是回调函数  函数内有三个参数
					console.log("加载完了...")
				},
				//index,离开的屏幕序号
				//nextIndex，目标的屏幕序号
				//direction，滚动的方法 （上，下）
				onLeave:function(index,nextIndex,direction){
					console.log("index:"+index+",next:"+nextIndex+",direction:"+direction);
				}
			})
		</script>

fullpage插件简介

很方便，很轻松制作全屏页面

fullpage插件下载使用

使用步骤
引入文件
页面骨架
fullpage方法

fullpage插件常用API

配置项、方法、回调函数

第一次博客思路不是很清晰但是该有的内容都有了，只要用心看完还是能够学会使用这个插件的。谢谢观赏！！！！

web_sea

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
fullpage插件的使用（内有下载插件地址）

简介fullPage.js是一个基于jQuery的全屏滚动插件，它能够很方便、很轻松的制作出全屏网站主要功能支持鼠标滚动多个回调函数支持手机、平板触摸事件支持 CSS3 动画窗口缩放时自动调整可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等下载fullpage地址(https://github.com/alvarotrigo/fullPage.js)使...
复制链接

扫一扫