如何在加載時隱藏幻燈片圖像

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; 

高度，請給一個像素值