Question

我正在尝试使用jQuery制作幻灯片，但是一旦隐藏了我就无法显示一个元素。这是我的代码：

<section id="content">
    <div id="jumbotron">
        <div class="slide" class="first-slide">
            <img src="IMG/Jellyfish.jpg" class="large">
        </div>
        <div class="slide">
            <img src="IMG/Koala.jpg" class="large">
        </div>
        <div class="slide">
            <img src="IMG/Penguins.jpg" class="large">
        </div>
    </div>
</section>

CSS：

.slide{
    display:none; 
}
div.first-slide{
    display:block;
}

为什么第一张图片没有显示？我认为display：block会覆盖dispay：hidden。

有人可以回答这个问题吗？谢谢！

Answer 1

您已使用class属性两次。您需要将css类放在一个class属性中。

所以

    <div class="slide" class="first-slide">
        <img src="IMG/Jellyfish.jpg" class="large">
    </div>

会变成

    <div class="slide first-slide" >
        <img src="IMG/Jellyfish.jpg" class="large">
    </div>

或者，如果您始终显示第一张图片，则根本不要在div上放置课程。

    <div>
        <img src="IMG/Jellyfish.jpg" class="large">
    </div>

制作幻灯片的问题。显示无？

1 个答案: