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/

注意：此外，请进行投票并将答案标记为正确。看来你没有为以前的答案做过这个，因此缺乏回应。

Answer 2

您想使用幻灯片特定的javascripts，如 -

Impress.js ：https://github.com/bartaz/impress.js/wiki/Examples-and-demos

Deck.js ：http://imakewebthings.com/deck.js/

Reveal.js ：https://github.com/hakimel/reveal.js

无数100％高度/宽度divs - 轮播导航？

2 个答案: