如何創建全屏幻燈片

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