0

そのため、2次元のコンテンツスライダーを作成しようとしていますが、実装に問題があります。私はjQueryを使用しています。

スライダーマークアップの基本的な考え方は次のとおりです。

<div id="contentSlider">
    <div class="contentBlock">
        <div class="pictures">
            <ul>
                <li>
                    <img src="img1.jpg" />
                </li>
                <li>
                    <img src="img2.jpg" />
                </li>
                <li>
                    <img src="img3.jpg" />
                </li>
            </ul>
            <div class="absPositionedNavUp></div>
            <div class="absPositionedNavDown></div>
        </div>
        <div class="text">
            <p>
                Blah blah yadda yadda.
                Blah blah yadda yadda.
                Blah blah yadda yadda.
                Blah blah yadda yadda.
            </p>
            <p>
                Blah blah yadda yadda.
                Blah blah yadda yadda.
                Blah blah yadda yadda.
                Blah blah yadda yadda.
            </p>
        </div>
    </div>
    <div class="contentBlock">
        ........
    </div>
    <div class="contentBlock">
        ........
    </div>
</div>
<div class="slideAllContentLeft"></div>
<div class="slideAllContentRight"></div>

私がやろうとしていること（そして特定の部分を機能させることができた）は次のとおりです。

（1）画像のdivを画像間で上下にスライドさせます

（2）contentSliderdivを複数のcontentBlockdiv間で左右にスライドさせます

私が現在持っているものは次のとおりです：http ：//www.ficreates.com/_SiteDemos/PBL/projects.html

私の主な問題は、そのCSS部分にあります。divを左から右に並べて、それらの間をスライドさせるにはどうすればよいですか？あなたは現在私のコードを見ることができます、それはそこへの道の約60％である可能性があります。

4

1 に答える 1

0

私は問題を解決しました、そして解決策は次のようなものです：

コンテンツブロックのコンテナdivを作成します。幅は次のように設定されます。jQueryの長さプロパティ（コンテンツブロックの総数を計算する）に単一のコンテンツブロックの幅（950px）を掛けたもの。次に、コンテナdivは、.content_sliderdiv内の絶対配置を使用して左から右に配置されます。

ファントムボーダーは、実際には、reset.cssファイルで設定されたline-heightの問題でした（ulは "line-height：1;"を継承していました）。これを「line-height：0;」で上書きしました。そして出来上がり、個々の写真の間に1.5pxのスペースはもうありません。

于 2012-08-13T20:10:51.307 に答える