2015-06-14 68 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

是的,非常感谢您的帮助。 –