jquery 全屏滚动插件fullPage初体验

最新推荐文章于 2021-08-19 15:57:55 发布

黄大仙No.1

最新推荐文章于 2021-08-19 15:57:55 发布

阅读量212

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/qq_44378358/article/details/108288018

版权

jQuery 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

全屏滚动fullpage插件下载地址及说明
https://github.com/alvarotrigo/fullPage.js

效果:
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>别只顾着左右滑动, 上下也可以</title>
		<link rel="stylesheet" href="css/fullpage.min.css">
		<script src="js/jquery-3.5.1.min.js"></script>
		<script src="js/fullpage.min.js"></script>
		<style>
			.slide{
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<div id="dowebok1">
			<div class="section active">
				<div class="slide">
					<img src="../pictures/2015.02.04-1236.webp">
				</div>
				<div class="slide">
					<img src="../pictures/2015.01.11-907.webp" alt="">
				</div>
				<div class="slide">
					<img src="../pictures/2015.01.03-2120.webp" alt="">
				</div>
				<div class="slide">
					<img src="../pictures/2015.01.30-790.webp" alt="">
				</div>
			</div><!--一屏-->
			<div class="section">
				<img src="../pictures/2015.07.24-117.webp">
			</div>
			<div class="section"><img src="../pictures/2015.02.14-1301.webp"></div>
			<div class="section"><img src="../pictures/2015.04.23-1479.webp"></div>
			<div class="section"><img src="../pictures/2015.04.24-78.webp"></div>
			<div class="section"><img src="../pictures/2015.02.15-1668.webp"></div>
			<div class="section"><img src="../pictures/2015.02.03-160.webp"></div>
		</div>
		<script>
			$(function () {
                $('img').css('width', window.innerWidth);
				$('#dowebok1').fullpage({
					sectionsColor: ['skyblue', 'pink', 'green', 'red','purple'],
					navigation: true
				})
            })
		</script>
	</body>
</html>