Javascript 当用户垂直滚动或单击底部导航选项卡时，如何制作一个显示下一张幻灯片的内容滑块？

这是我关于堆栈溢出的第一篇文章，如果我不清楚我在说什么，那么很抱歉。但基本上我正在做一个小的学校项目，它基本上是一个关于我的网站，用来更新我们在这个夏天学到的东西。我在屏幕底部有用于导航的选项卡，在屏幕中央有内容。单击新选项卡或向下滚动时，我希望相应的div滑入旧内容所在的位置。我对JavaScript没有太多的知识，所以我不知道如何去做。我一直在寻找图像滑块，但这些并不是我真正想要的。我在找这样的东西：

这就是它现在的样子：

到目前为止，这基本上是我所有的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>

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函数来切换活动类，这样非活动类就会显示：none，但我希望它有一个滑动效果。我真的很感激任何帮助。如果您需要我澄清任何事情，请让我知道。

您可以使用上面Fabio提到的各种插件，或者您可以使用此代码作为起点-

你的coolcarousels链接显示它是水平运行的，所以小提琴就是这样工作的

JS

---

属性在fiddle的JS部分有说明。

我使用了这个网站上的一个非常简单的脚本

只需下载并在页面上包含Cycle2插件（确保您也拥有最新版本的Jquery），然后声明幻灯片标记。网站上有大量的演示，非常容易理解

祝你的项目好运

您可以为此使用或

$("#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);
                                            });