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

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>