如何创建全屏幻灯片

Question

有人可以帮我创建完全像以下网站的全屏幻灯片吗... 隐藏浏览器滚动条，向上/向下滚动或向上/向下按键滑动移动到下一个屏幕，并根据幻灯片更改活动点。

http://vaalentin.github.io/2015/

$("nav a").click(function() {
    $('html, body').animate({
      scrollTop: $($(this).attr('href')).offset().top
    }, 1000);
});

* {
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
	}
	body {
		margin: 0px;
		overflow: hidden;
	}
	.box {
		display: table;
		width: 100vw;
		height: 100vh;
	}
	.box { background-color: rgb(179, 235, 255); }
	.box + .box { background-color: rgb(217, 255, 228); }
	.box + .box + .box { background-color: rgb(255, 221, 255); }
	.box + .box + .box + .box { background-color: rgb(255, 190, 190); }
	.box + .box + .box + .box + .box { background-color: rgb(253, 176, 255); }
	.box + .box + .box + .box + .box + .box { background-color: rgb(0, 26, 73); color: #fff; }
	.box + .box + .box + .box + .box + .box + .box { background-color: rgb(23, 0, 4); }

	.inner {
		display: table-cell;
		text-align: center;
		vertical-align: middle;
		font-size: 1vw;
	}
	nav {
		position: fixed;
		z-index: 999;
		top: 50%;
		right: 20px;
	}
		nav a:link,
		nav a:visited {
			display: block;
			width: 10px;
			height: 10px;
			margin-bottom: 10px;
			cursor: pointer;
			background-color: #222;
			border-radius: 50%;
		}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
	<a href="#home"></a>
	<a href="#services"></a>
	<a href="#team"></a>
	<a href="#work"></a>
	<a href="#process"></a>
	<a href="#faq"></a>
	<a href="#contact"></a>
</nav>

<div id="home" class="box">
	<div class="inner">
		<h1>Home</h1>
	</div>
</div>

<div id="services" class="box">
	<div class="inner">
		<h1>Services</h1>
	</div>
</div>

<div id="team" class="box">
	<div class="inner">
		<h1>Team</h1>
	</div>
</div>

<div id="work" class="box">
	<div class="inner">
		<h1>Recent Work</h1>
	</div>
</div>

<div id="process" class="box">
	<div class="inner">
		<h1>Process</h1>
	</div>
</div>

<div id="faq" class="box">
	<div class="inner">
		<h1>FAQ</h1>
	</div>
</div>

<div id="contact" class="box">
	<div class="inner">
		<h1>Contact</h1>
	</div>
</div>

Answer 1

看看impress.js它给你一个已经有效的框架，你只需要编写元素。

https://github.com/bartaz/impress.js/

修改

其他框架是fullPage.js

https://github.com/alvarotrigo/fullPage.js