Question

我有一个拥有3张720x360像素的大图像的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/

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

您可以对要隐藏的图像使用visibility属性。像这样：能见度：隐藏;

CSS - 如何隐藏额外的图像

3 个答案: