jquery插件之全屏滚动

最新推荐文章于 2024-06-24 17:03:04 发布

㼛思雨

最新推荐文章于 2024-06-24 17:03:04 发布

阅读量430

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/weixin_45147894/article/details/109274658

版权

该博客介绍了如何使用jQuery创建全屏滚动效果。主要内容包括：1) 引入必要的js和css文件；2) 设计HTML结构，每个section代表一屏，可以设置默认显示的屏幕；3) 使用JavaScript进行配置，包括各种选项、方法和回调函数的详细说明。

摘要由CSDN通过智能技术生成

重点：

下载文件：

引入js和css和html结构：

演示代码：


<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>fullPage.js — 基本演示_dowebok</title>
<link rel="stylesheet" href="https://cdn.dowebok.com/77/css/jquery.fullPage.css">
<style>
.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}
</style>
<script src="https://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.dowebok.com/77/js/jquery.fullPage.min.js"></script>
<script>
$(function(){
	$('#dowebok').fullpage({
		sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90']
	});
});
</script>
</head>

<body>

<div id="dowebok">
	<div class="section">
		<h3>第一屏</h3>
		<p>fullPage.js — 基本演示</p>
	</div>
	<div class="section">
		<div class="slide"><h3>第二屏的第一屏</h3></div>
		<div class="slide"><h3>第二屏的第