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

【问题标题】：Is there a quicker way to hide my images in the slideshow?有没有更快的方法在幻灯片中隐藏我的图像？
【发布时间】：2017-03-09 22:28:27
【问题描述】：

正如标题所说，我不希望在加载页面时看到图像。我在幻灯片中使用了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>

什么能让我在那之后再次向他们展示？

【问题讨论】：

标签： jquery html slideshow show-hide

【解决方案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) {

你明白了。

【讨论】：