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

Question

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

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

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

我想阻止它的发生，并且只有在负载横幅区域中显示的第一张图像。

有什么建议吗？我无法弄清楚。 谢谢， 奥兹

Answer 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(); 
}); 

但你的滑块插件可能会为你做这个。

Answer 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; 

高度，请给一个像素值