Html CSS-如何隐藏额外的图像

我有一个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>

---

您可以在此处看到输出：

使用

显示：无指向您不想显示的图像

你可以这样做

.dis_none{
   display :none;
}

将class
disu none
添加到您不想显示的图像中
好的，我想您需要的是带有class
滑块大图像的div和
滑块侧边栏
，以便只显示一个图像

顺便说一下，您没有
滑块侧边栏
的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;
}

可以对要隐藏的图像使用“可见性”属性。
这样地：
可见性：隐藏
 不！这不是你所理解的，侧边栏应该显示3个图像，但大图像应该只显示1个，这是滑块的设计：）好的，那么我将简单地调整它，使侧边栏保持与原始样式相同，并且只有“大图像”将具有缩小的宽度和滚动显示（对不起，我刚才说溢出时是想说滚动）哇，我刚才说的完全错了，我想用“溢出”而不是“显示”.My bad。这应该是您现在想要的。您可以使用单个img标记并使用Javascript来更改src。@Barmar yup..绝对同意..这是最好的主意..但我没有jquery或Javascript标记，因此不得不说要使用display属性
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;
}