简单的库第一次打开时加载所有图片

我是一个试图为我的网站做一个画廊，但我失败的地方。我想要做的是创建一个页面顶部的菜单，然后在它下面的小图片框。当你点击其中一个时，图片应该加载在这些框下。到目前为止，我已经完成了我的菜单，而且我的盒子中有图片，但问题是，当您第一次加载页面时，小框中的所有图片都会加载到下方，并且当您点击任何框时 - 它们会消失，应该只加载所选图片。所以我的问题是，我不能让页面在第一次加载时不加载所有这些图片。我不介意它是否加载其中一个，但不是全部。我一直试图修复它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

简单的库第一次打开时加载所有图片

回答

相关问题