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

你明白了。

是否有更快捷的方式在幻灯片中隐藏我的图像？

1 个答案: