隐藏除第一个之外的所有图像，直到页面完全加载

Question

我的页面上有一个滑块，它是这样实现的：

<ul class="slides" id="slides">
    <li class="slide"><a href=""><img src="1.jpg" title="" alt="" /></a></li>
    <li class="slide"><a href=""><img src="2.jpg" title="" alt="" /></a></li>
    <li class="slide"><a href=""><img src="3.jpg" title="" alt="" /></a></li>
    <li class="slide"><a href=""><img src="4.jpg" title="" alt="" /></a></li>
</ul>

如果我加载页面，所有图像都会同时显示。只有在加载了整个页面之后，才会触发滑块脚本并隐藏除一个之外的所有图像。 我试图通过给滑块一个特定的高度来用 CSS 修复它。实际上这适用于桌面，但如果我调整浏览器窗口的大小则不行。

所以我想编写某种 JavaScript 来隐藏除第一个之外的所有图像，直到页面完全加载。

我用下面的脚本试过了，但它不起作用

<script>
jQuery(window).load(function() {
  jQuery(".slides li:not(:first-child)").hide(function() {
    jQuery(".slides li:not(:first-child)").show();
  });
});
</script>

谁能指出我正确的方向？

Answer 1

使用 CSS

#slides li:not(:first-child) { display: none }

然后在加载时显示它们

$(window).load(function() {
    $(".slides li:not(:first-child)").show();
});