隐藏除第一张以外的所有图片，直到页面完全加载

Hide all images except first one till page is fully loaded

本文关键字：有图片 加载 一张 隐藏      更新时间：2023-09-26

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

<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>
谁能给我指个正确的方向?

使用CSS

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

然后显示加载

$(window).load(function() {
    $(".slides li:not(:first-child)").show();
});
相关文章：