簡單的庫第一次打開時加載所有圖片

我是一個試圖爲我的網站做一個畫廊，但我失敗的地方。我想要做的是創建一個頁面頂部的菜單，然後在它下面的小圖片框。當你點擊其中一個時，圖片應該加載在這些框下。到目前爲止，我已經完成了我的菜單，而且我的盒子中有圖片，但問題是，當您第一次加載頁面時，小框中的所有圖片都會加載到下方，並且當您點擊任何框時 - 它們會消失，應該只加載所選圖片。所以我的問題是，我不能讓頁面在第一次加載時不加載所有這些圖片。我不介意它是否加載其中一個，但不是全部。我一直試圖修復它3天，但沒有運氣，所以我沒有選擇，但要求你的幫助。簡單的庫第一次打開時加載所有圖片

這裏的HTML：

<!DOCTYPE HTML> 
<HEAD> 
<LINK href="Menu/Menu.css" rel="stylesheet" type="text/css" /> 
<LINK href="Pictures/Background.css" rel="stylesheet" /> 
<link rel="stylesheet" type="text/css" href="Style/style.css"/> 
<script type="text/javascript" src="JavaScript/Script.js"></script> 
</HEAD> 
<BODY> 


<nav class="nav"> 
<ul> 
<li class="current"><a href="Index.html"><b>MENU</b></a></li> 
<li><a href="#">BLOG</a></li> 
<li><a href="#">MUSIC</a></li> 
<li><a href="#">PHOTOGRAPHY</a></li> 
<li><a href="QuotesAndThoughts.html">QUOTES & THOUGHTS</a></li> 
<li><a href="AboutMe.html">ABOUT ME</a></li> 
</ul> 
</nav> 



<div id="gallery"> 
    <div id="thumbs"> 
     <a href="javascript: changeImage(1);"><img src="Pictures/Photography/image1.jpg" alt="" /></a> 
     <a href="javascript: changeImage(2);"><img src="Pictures/Photography/image2.jpg" alt="" /></a> 
     <a href="javascript: changeImage(3);"><img src="Pictures/Photography/image3.jpg" alt="" /></a> 
     <a href="javascript: changeImage(4);"><img src="Pictures/Photography/image4.jpg" alt="" /></a> 
     <a href="javascript: changeImage(5);"><img src="Pictures/Photography/image5.jpg" alt="" /></a> 
     </div> 
    <CENTER> 
    <div id="bigimages"> 
     <div id="normal1"> 
      <img src="Pictures/Photography/bigimage1.jpg" alt=""/> 
     </div> 

     <div id="normal2"> 
      <img src="Pictures/Photography/bigimage2.jpg" alt=""/> 
     </div> 

     <div id="normal3"> 
      <img src="Pictures/Photography/bigimage3.jpg" alt=""/> 
     </div> 

     <div id="normal4"> 
      <img src="Pictures/Photography/bigimage4.jpg" alt=""/> 
     </div> 

     <div id="normal5"> 
      <img src="Pictures/Photography/bigimage5.jpg" alt=""/> 
     </div> 

    </div> 
</div> 

</BODY> 
</HTML>

這裏的CSS：

html{ 
background:url(BACKGROUND.jpg) no-repeat center center; 
min-height:100%; 
background-size:cover; 
} 

img { 
    border: none; 
} 

#gallery { 
    margin: 0 auto; 
    width: 100%; 
} 
#thumbs { 
    margin: 10px auto 10px auto; 
    width: 100%; 
} 
#bigimages { 
    width: 100%; 
    float: left; 
} 
#thumbs img { 
    width: 50px; 
    height: 50px; 
} 
#bigimages img { 
    border: 4px solid #555; 
    margin-top: 5px; 
    height: 500px; 
} 
#thumbs a:link, #thumbs a:visited { 
    width: 50px; 
    height: 50px; 
    border: 6px solid #555; 
    margin: 6px; 
    float: left; 
} 
#thumbs a:hover { 
    border: 6px solid #888; 
}

最後這裏是我的簡單的JavaScript：

function changeImage(current) { 
    var imagesNumber = 5; 

    for (i=1; i<=imagesNumber; i++) { 
     if (i == current) { 
      document.getElementById("normal" + current).style.display = "block"; 
     } else { 
      document.getElementById("normal" + i).style.display = "none"; 
     } 
    } 
}

來源

2015-03-02 Daniela Gocheva

您可以簡單地通過CSS隱藏它們。

#bigimages > div:not(:first-child) { display: none; }

這應該只顯示第一個大圖像。如果您向圖像包裝添加了類，可能會更容易。假設類可能是大圖像套，CSS將是：

#bigimages > div.big-image-wrap { display: none; } 
#bigimages > div.big-image-wrap:first-child { display: block; }

來源

2015-03-02 19:37:14 usererror

我不工作：/ – 2015-03-02 20:03:34

它在我製作的這支筆中工作。 [鏈接]（http://codepen.io/anon/pen/rararW） – usererror 2015-03-02 20:42:00

非常感謝！有效！ – 2015-03-02 20:46:52

您可以隱藏在負載情況下的圖像。像這樣：

window.onload = function(){ 
var thumbs = document.getElementById('thumbs'); 
var images = thumbs.getElementsByTagName('img'); 
for (i = 0; i < images.length;i++) { 
    images[i].style.display = "none"; 
    } 
}

來源

2015-03-02 19:31:19 Rajat

我只是增加了它在我的JS，但似乎沒有任何改變...... – 2015-03-02 19:33:42

您可以將JavaScript文件，其中body標籤獲取關閉。即之前 ?? – Rajat 2015-03-02 19:40:59

它只在頭部加載 – 2015-03-02 20:03:50

簡單的庫第一次打開時加載所有圖片

回答

相關問題