0

我有一个 div，其中包含 3 个 720x360px 的大图像，它们对用户都是可见的，但我想要一次只显示 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

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

你可以这样做

.dis_none{
   display :none;
}

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

于 2012-12-23T09:27:16.593 回答
0

好的，我认为您想要的是带有类的 divslider-large-image并且slider-sidebar只显示一个图像。

顺便说一句，您没有slider-sidebar.

所以假设这是你想要的，你基本上需要设置这些 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;
}
于 2012-12-23T09:29:35.863 回答
0

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

于 2012-12-24T08:14:41.400 回答