0

フルスクリーンの画像スタイルを実現するために100％の幅と高さを使用するWebページがあります。ただし、これらの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

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

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

于 2013-04-07T13:47:19.307 に答える