javascript - 许多 100% 高度/宽度 div - 旋转木马导航？

Question

我有一个使用 100% 宽度和高度来实现全屏图像样式的网页。但是，我希望这些 div 并排放置，当我单击一个按钮时，它会切换到下一张或上一张幻灯片。你认为我如何才能做到这一点？

这是轮播代码:

<div class="page-carousel">

    <div class="page page-01" style="background: url(images/01.jpg);">

        <div class="page-text">

            <h1>Headline</h1>
            <h2>Subheader</h2>

            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

        </div>

    </div>

    <div class="page page-02" style="background: url(images/02.jpg);">

        <div class="post-text">

            <h1>Headline</h1>
            <h2>Subheader</h2>

            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

        </div>

    </div>

</div>

还有 CSS:

.page-carousel{
    height: 100%;
    width: 100%;
}

.page{
    height: 100%;
    width: 100%;
    background: no-repeat bottom center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: relative;
    float: left;
    z-index:0;
}

提前致谢!

Answer 1

一个非常简单的示例，可以让您走上正确的轨道，前提是您不选择插件:

http://jsfiddle.net/22VNQ/1/

注意:此外，请投票并将答案标记为正确。对于之前的答案，您似乎没有这样做，因此没有回复。