0

我有一个使用 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;
}

提前致谢！

4

2 回答 2

0

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

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

注意：另外，请投票并将答案标记为正确。看来您还没有为以前的答案这样做，因此缺乏回应。

于 2012-04-17T23:18:38.627 回答
0

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

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

甲板.js： http : //imakewebthings.com/deck.js/

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

于 2013-04-07T13:47:19.307 回答