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

Question

正如标题所说，我不想在加载页面时看到图像。我为我的幻灯片使用了 this 脚本。这是代码：

<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) {

你明白了。

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

Is there a quicker way to hide my images in the slideshow?

html

jquery

slideshow

show-hide