CSS -如何隐藏额外的图像

Question

我有一个div，其中包含3个720x360px的大图像，它们对用户都是可见的，但我想要的是一次只显示一张图像。

我的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/

Answer 1

对那些你不想显示的图像使用display :none;

您可以通过以下方式完成此操作

.dis_none{
   display :none;
}

并将类dis_none添加到您不想显示的图像中

Answer 2

好的，我想你想要的是带有slider-large-image和slider-sidebar类的div来只显示一张图片。

顺便说一下，您没有用于slider-sidebar的CSS样式。

因此，假设这就是您想要的，您基本上需要设置这些div的宽度，以便它们只显示一个图像，并将overflow设置为hidden或scroll

例如：

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;
}

Answer 3

您可以使用要隐藏的图像的可见性属性。像这样:可见性:隐藏；