當用戶垂直滾動或單擊底部導航標簽之一時，如何制作顯示下一張幻燈片的內容滑塊？

Question

這是我關於Stack Overflow的第一篇文章，如果我不清楚我在說什么，請對不起。 但是基本上我正在做一個小學校項目，基本上是一個關於我的網站，以刷新我們在夏天學到的東西。 我在屏幕底部有用於導航的標簽，並且內容在屏幕中央。 單擊新選項卡或向下滾動時，我希望相應的div滑入舊內容所在的位置。 我沒有JavaScript的豐富知識，所以我不知道該怎么做。 我一直在尋找圖像滑塊，但這些並不是我真正想要的。 我正在尋找這樣的東西： http : //coolcarousels.frebsite.nl/c/8/

這就是現在的樣子： http : //i.imgur.com/BqZ78S3.jpg

到目前為止，這基本上是我所有的HTML：

<main class="content-container">
<section class="slider animated fadeInDown">
    <div class="intro-content">
        <h1>Hi, my name is Brian Hurtado.</h1>
        <h3>I enjoy making beautiful and innovative websites.</h3>
    </div>

    <div class="summer-content">
        <h1>This is my text about summer.</h1>
        <h3>This is some more text about my summer.</h3>
    </div>

    <div class="design-content">
        <h1>This is some text about web design.</h1>
        <h3>This is some more text about web design.</h3>
    </div>

    <div class="schedule-content">
        <h1>This is some text about my schedule.</h1>
        <h3>Probably going to put a table in here.</h3>
    </div>

    <div class="site-content">
        <h1>This is some text about what I want to do with the school site.</h1>
        <h3>This is some more text about what I want to do with the school site.</h3>
    </div>

    <div class="goals-content">
        <h1>These are my goals that I hope to achieve in the future.</h1>
        <h3>I have to think of some goals.</h3>
    </div>
</section> 
</main>

<nav class="main-nav">
<ul>
    <li class="active">
        <a href="#">
            <span>
                <img src="img/home.png">
            </span>
            <b>Intro</b>
        </a>
    </li>
    <li>
        <a href="#">
            <span>
                <img src="img/summer.png">
            </span>
            <b>Summer</b>   
        </a>
    </li>
    <li>
        <a href="#">
            <span>
                <img src="img/design.png">
            </span>
            <b>Web Design</b>
        </a>
    </li>
    <li>
        <a href="#">
            <span>
                <img src="img/schedule.png">
            </span>
            <b>Schedule</b>
        </a>
    </li>
    <li>
        <a href="#">
            <span>
                <img src="img/site.png">
            </span>
            <b>School Site</b>
        </a>
    </li>
    <li>
        <a href="#">
            <span>
                <img src="img/goals.png">
            </span>
            <b>Goals</b>
        </a>
    </li>
</ul>
</nav>

這是我的CSS：

body {
font-family: Lato, sans-serif;
}

.content-container {
width: 100%;
height: 80vh;
text-align: center;
color: black;
font-size: 42px;
}

.slider {
width: 1200px;
height: 300px;
overflow: hidden;
margin: 0 auto;
position: relative;
top:250px;
}

.intro-content h3 {
margin-top: -30px;
}

.main-nav {
position: absolute;
bottom:0;
width: 100%;
background-color: #101518;
}

.main-nav ul {
width: 1200px;
margin: 0 auto;
text-align: center;
}

.main-nav ul li a {
color:white;
text-decoration: none;
}

.main-nav ul li {
display: inline-block;
padding: 15px 35px;
font-size: 20px;
color: white;
-o-transition:.3s ;
-ms-transition:.3s;
-moz-transition:.3s;
-webkit-transition:.3s;
transition:.3s;
}

.main-nav ul li:not(.active) {
opacity: 0.5;
}

.main-nav ul li:hover {
opacity: 1;
}

.main-nav span {
width: 40px;
height: 40px;
display: block;
margin:0 auto 5px;
}

html {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("../img/landscape.jpg") no-repeat center center;
background-size: cover;
}

從這里我到底需要做什么？ 我在想也許要做一個onclick函數來切換活動類，以便非活動類顯示：無，但是我希望它具有滑動效果。 我真的很感謝您的幫助。 如果您需要我澄清任何事情，請告訴我。

Answer 1

您可以使用上面Fabio提到的各種插件，也可以將此代碼作為起點-FIDDLE 。

您與coolcarousels的鏈接顯示它是水平運行的，因此這是小提琴的工作方式。

JS

$("#selector a").on("click",function(event){
    event.preventDefault();
    var target = $(this).attr("href");
    $("html, body").stop().animate({
                       scrollLeft: $(target).offset().left,
                       scrollTop: $(target).offset().top
                                    },
                                     1200);
                                            });

小提琴的JS部分中注明了歸因。

Answer 2

我從這個網站使用了一個非常簡單的腳本。

http://jquery.malsup.com/cycle2/

只需下載並在頁面上包括Cycle2插件（確保您也具有最新版本的Jquery），然后聲明幻燈片標記。 網站上有大量的演示程序，非常易於遵循。

祝您好運！