有没有更快的方法来隐藏我的图片在幻灯片中？

Question

正如标题所述，当我加载页面时，我不希望看到图像。我在幻灯片中使用了这脚本。这就是守则：

<div id="slideshow" name="slideshow" class="slideshow">
    <div>
        <img src='{ROOT}img/Camerashop24/slide1.jpg' alt="slide-1" class="slide">
    </div>
    <div>
        <img src='{ROOT}img/Camerashop24/slide2.jpg' alt="slide-2" class="slide">
    </div>
    <div>
        <img src='{ROOT}img/Camerashop24/slide3.jpg' alt="slide-3" class="slide">
    </div>
    <div>
        <img src='{ROOT}img/Camerashop24/slide4.jpg' alt="slide-4" class="slide">
    </div>
</div>

<script>
    $("#slideshow > div:gt(0)").hide();

    setInterval(function() { 
      $('#slideshow > div:first')
        .fadeOut(0)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('#slideshow');
    },  10000);
</script>

当页面加载时，我可以快速地看到幻灯片中使用的4幅图像。在此之后，jQuery脚本会隐藏它们，但是有什么方法可以立即隐藏它们吗？例如：

<div id="slideshow" name="slideshow" class="slideshow">
    <div>
        <img src='{ROOT}img/Camerashop24/slide1.jpg' alt="slide-1" class="slide" style="display: none;">
    </div>
    <div>
        <img src='{ROOT}img/Camerashop24/slide2.jpg' alt="slide-2" class="slide" style="display: none;">
    </div>
    <div>
        <img src='{ROOT}img/Camerashop24/slide3.jpg' alt="slide-3" class="slide" style="display: none;">
    </div>
    <div>
        <img src='{ROOT}img/Camerashop24/slide4.jpg' alt="slide-4" class="slide" style="display: none;">
    </div>
</div>

什么能让我在那之后再给他们看一遍？

Answer 1

是的，基本上不要让jQuery用以下方式隐藏您的图像：

$("#slideshow > div:gt(0)").hide();   // so remove this!!
                                      // Page is almost entirely rendered and it's
                                      // too late to hide images now

但是使用CSS代替：

#slideshow > div ~ div{
   display: none;
}

以上只会使第一张幻灯片DIV可见，同时隐藏所有其他下一个兄弟姐妹。

剩下的jQuery将比剩下的要为您做。

CSS3还允许您使用以下内容：

#slideshow > div:not(div:first-child) {

你说对了。