有人可以幫助我創建全屏幻燈片酷似以下網站...... 瀏覽器滾動條是隱藏的,當向上/向下滾動或按上/下鍵幻燈片移動到下一個屏幕和主動點根據幻燈片更改。如何創建全屏幻燈片
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()'選擇,對不對?從我所看到的情況來看,這似乎有效? –