有人可以帮助我创建全屏幻灯片酷似以下网站...... 浏览器滚动条是隐藏的,当向上/向下滚动或按上/下键幻灯片移动到下一个屏幕和主动点根据幻灯片更改。如何创建全屏幻灯片
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>
您是否尝试过实施什么?如果是这样,请发布您的代码并对问题进行具体说明。 – Prudhvi
@prudhvi我加片段。 –
你知道的':第n-cild()'选择,对不对?从我所看到的情况来看,这似乎有效? –