如何创建一个滑块来更改主页面内容以及滑块内容并为过渡设置动画？

Question

正如标题所说，我正试图达到以下效果但不幸的是我不知道从哪里开始。任何建议或将不胜感激。这是一个粗糙的油漆图像，以说明我想要实现的目标。

http://i.stack.imgur.com/PssGA.png

此处可以找到效果最接近的页面：

http://www.squarespace.com/tour/weddings

正如您所看到的，滑块具有一个小动画，基于哪个幻灯片正在转换到哪个以及主页面内容发生变化。

Answer 1

我建议你找一个开源滑块，下载，阅读其文档
并在其上构建你的滑块。
在决定使用该滑块之前，不要忘记阅读许可证 我找到了一个：
https://github.com/gilbitron/Lean-Slider

Answer 2

这里我们可以使用jQuery和CSS来实现这个效果，我使用过以前使用过的代码，所以效果是垂直的，向下滚动。您可以对其进行编辑以进行出价。抱歉，我没时间对代码发表评论！要更改滑块，您可以更改每张幻灯片上的按钮（或链接）！
的 HTML ：

<div id="one">
    <h2>Header One</h2><p>
    <a href="#one">One</a> - 
    <a href="#two">Two</a> - 
    <a href="#three">Three</a> - 
    <a href="#four">Four</a> - 
    <a href="#five">Five</a>
    </p>
</div>
<div id="two">
    <h2>Header Two</h2><p>
    <a href="#one">One</a> -
    <a href="#two">Two</a> -
    <a href="#three">Three</a> -
    <a href="#four">Four</a> -
    <a href="#five">Five</a>
    </p>
</div>
<div id="three">
    <h2>Header Three</h2><p>
    <a href="#one">One</a> -
    <a href="#two">Two</a> -
    <a href="#three">Three</a> -
    <a href="#four">Four</a> -
    <a href="#five">Five</a>
    </p>
</div>
<div id="four">
    <h2>Header Four</h2><p>
    <a href="#one">One</a> -
    <a href="#two">Two</a> -
    <a href="#three">Three</a> -
    <a href="#four">Four</a> -
    <a href="#five">Five</a>
    </p>
</div>
<div id="five">
    <h2>Header Five</h2><p>
    <a href="#one">One</a> -
    <a href="#two">Two</a> -
    <a href="#three">Three</a> -
    <a href="#four">Four</a> -
    <a href="#five">Five</a>
    </p>
</div>

<强>的jQuery ：

$('a').on('click', function (event) {
    event.preventDefault();//stop the browser from jumping to the anchor
    var href  = $(this).attr('href'),
        oset  = $(href).offset().top;
    $('html, body').stop().animate({
        scrollTop : oset
    }, 1000, function () {
        location.hash = href;
    });
});

请注意，下面的CSS NOT 必不可少！
的 CSS ：

div {
    height : 500px;
    border : 1px solid #000;
}