Question

我是一个尝试为我的网站创建一个画廊的人，但我在某个地方失败了。我想要做的是创建一个页面顶部的菜单，然后在它下面的小图片框。当您单击其中一个时，应将图片加载到这些框下。到目前为止，我已经完成了我的菜单，并且我有了包含图片的方框，但问题是，当您第一次加载页面时，小方框中的所有图片都会被加载下来，当您点击任何方框时 - 它们会消失，只应加载所选图片。所以我的问题是，当第一次加载时，我无法使页面加载所有这些图片。我不介意它只是加载其中一个，但不是全部。我现在一直试图修复它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";
        }
    }
}

Answer 1

您可以通过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; }

Answer 2

您可以在加载事件中隐藏这些图像。像这样：

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";
  }
}

第一次打开时，简单的画廊加载所有图片

2 个答案: