2015-06-14 66 views
1

有人可以幫助我創建全屏幻燈片酷似以下網站...... 瀏覽器滾動條是隱藏的,當向上/向下滾動或按上/下鍵幻燈片移動到下一個屏幕和主動點根據幻燈片更改。如何創建全屏幻燈片

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

$("nav a").click(function() { 
 
    $('html, body').animate({ 
 
     scrollTop: $($(this).attr('href')).offset().top 
 
    }, 1000); 
 
});
* { 
 
\t \t box-sizing: border-box; 
 
\t \t -webkit-box-sizing: border-box; 
 
\t } 
 
\t body { 
 
\t \t margin: 0px; 
 
\t \t overflow: hidden; 
 
\t } 
 
\t .box { 
 
\t \t display: table; 
 
\t \t width: 100vw; 
 
\t \t height: 100vh; 
 
\t } 
 
\t .box { background-color: rgb(179, 235, 255); } 
 
\t .box + .box { background-color: rgb(217, 255, 228); } 
 
\t .box + .box + .box { background-color: rgb(255, 221, 255); } 
 
\t .box + .box + .box + .box { background-color: rgb(255, 190, 190); } 
 
\t .box + .box + .box + .box + .box { background-color: rgb(253, 176, 255); } 
 
\t .box + .box + .box + .box + .box + .box { background-color: rgb(0, 26, 73); color: #fff; } 
 
\t .box + .box + .box + .box + .box + .box + .box { background-color: rgb(23, 0, 4); } 
 

 
\t .inner { 
 
\t \t display: table-cell; 
 
\t \t text-align: center; 
 
\t \t vertical-align: middle; 
 
\t \t font-size: 1vw; 
 
\t } 
 
\t nav { 
 
\t \t position: fixed; 
 
\t \t z-index: 999; 
 
\t \t top: 50%; 
 
\t \t right: 20px; 
 
\t } 
 
\t \t nav a:link, 
 
\t \t nav a:visited { 
 
\t \t \t display: block; 
 
\t \t \t width: 10px; 
 
\t \t \t height: 10px; 
 
\t \t \t margin-bottom: 10px; 
 
\t \t \t cursor: pointer; 
 
\t \t \t background-color: #222; 
 
\t \t \t border-radius: 50%; 
 
\t \t }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
\t <a href="#home"></a> 
 
\t <a href="#services"></a> 
 
\t <a href="#team"></a> 
 
\t <a href="#work"></a> 
 
\t <a href="#process"></a> 
 
\t <a href="#faq"></a> 
 
\t <a href="#contact"></a> 
 
</nav> 
 

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

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

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

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

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

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

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

+2

您是否嘗試過實施什麼?如果是這樣,請發佈您的代碼並對問題進行具體說明。 – Prudhvi

+0

@prudhvi我加片段。 –

+1

你知道的':第n-cild()'選擇,對不對?從我所看到的情況來看,這似乎有效? –

回答

2

看impress.js它給你一個已經工作的框架,你只需要組成元素。

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

編輯

其他框架fullPage.js

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

+0

感謝您的輸入,但我無法實現我的目標是,是我真正需要的是向上/向下滾動和箭頭鍵上下功能,我的移動滑下一首/上。 –

+1

我認爲新一個是你在找什麼。 – B3rn475

+1

是的,非常感謝您的幫助。 –