如何在加载时隐藏幻灯片图像答案

【问题标题】：How to hide slideshow images on load如何在加载时隐藏幻灯片图像
【发布时间】：2013-10-24 03:43:19
【问题描述】：

我在横幅中创建了一个带有幻灯片的页面。

一切都很好——除了页面正在加载。当浏览器加载页面时，它会显示所有图像，一个在另一个，覆盖整个页面，然后才开始播放幻灯片，隐藏其余图像。

你可以在这里看到它：http://regal.preciseos.com/

我想防止它发生，并且在加载时只在横幅区域中显示第一张图片。

有什么建议吗？我想不通。谢谢，盎司

【问题讨论】：

最初用 css 隐藏它们，可能让第一个可见。

标签： javascript jquery html css slideshow

【解决方案1】：

执行以下操作之一：

为每个带有display: none 的图像应用一个类：

.myClass {display: none;}

<img class="myClass" />

为每张图片添加style="display: none;"：

<img style="display: none;" />

在 document.ready 函数中隐藏图像：

$(function() {
    $('.myClass').hide();
});

根据您使用的滑块，您可能需要在 document.ready 上显示第一张图片：

$(function() {
    $('.myClass').hide().get(0).show();
});

但是您的滑块插件可能会为您执行此操作。

【讨论】：

【解决方案2】：

给 CSS 像这样

让我们假设横幅的宽度 X 高度为 1366X329。将所有图像添加到容器中

.container{ width:1366px; height:329px; overflow:hidden}

你的 CSS 像这样

.banner {
width: 100%;
height: auto;
-webkit-box-shadow: 0px 3px 5px #BBB;
-moz-box-shadow: 0px 3px 5px #bbb;
box-shadow: 0px 3px 5px #BBB;
position: relative;
overflow: hidden;

你给auto的高度，请给个像素值

【讨论】：