0

私は 720x360px の 3 つの大きな画像を保持する div を持っていますが、それらはすべてユーザーに表示されますが、一度に 1 つの画像のみを表示したいのです。

私のhtmlコード:

<div class="main-slider">

        <div class="slider-large-image">
            <img src="images/floor_guide.png" alt="" width="727px" height="360px" />
            <img src="images/ice_planet.jpg" alt="" width="727px" height="360px" />
            <img src="images/buddy_work.jpg" alt="" width="727px" height="360px" />
        </div>

        <div class="slider-sidebar">
            <img class="image1" src="images/floor_guide.png" alt="" width="240px" height="180px" />
            <img class="image2"  src="images/ice_planet.jpg" alt="" width="240px" height="180px" />
            <img class="image3"  src="images/buddy_work.jpg" alt="" width="240px" height="180px" />
        </div>

    </div>

私のCSSコード:

.main-slider{
    height:360px;
    width:1281px;
}

.slider-large-image{
    width:720px;
    display:inline-block;
    white-space:nowrap;
}

.slider-large-image img{
    display:inline-block;
}

ここで出力を見ることができます：http://jsfiddle.net/mareebsiddiqui/dPAnr/

4

3 に答える 3

0

非表示にする画像の可視性プロパティを使用できます。このように：visibility：hidden;

于 2012-12-24T08:14:41.400 に答える
0

display :none;見せたくない画像に使用しないでください

あなたはこれを行うことができます

.dis_none{
   display :none;
}

dis_none表示したくない画像にクラスを追加 します

于 2012-12-23T09:27:16.593 に答える
0

さて、あなたが望むのは、クラスslider-large-imageを含む div とslider-sidebar1 つの画像のみを表示することの両方です。

ところで、 の CSS スタイル設定はありませんslider-sidebar。

それがあなたが望むものであると仮定すると、基本的にこれらのdivの幅を設定して、1つの画像のみを表示し、またはに設定overflowする必要がありますhiddenscroll

例えば：

css

    .main-slider{
    height:360px;
    width:1281px;
}

.slider-large-image{
    width:360px;  /* CHANGED TO SMALLER WIDTH, to match the width of one image */
    display: inline-block;
    overflow: scroll; /* set overflow to scroll */
    white-space:nowrap;
}

.slider-large-image img{
     display: inline-block;
}
于 2012-12-23T09:29:35.863 に答える