个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我是一名尝试为我的网站制作画廊的初学者，但我在某处失败了。我想做的是创建一个顶部有菜单的页面，然后在它下面有小图片框。当您单击其中一个时，图片应加载到这些框下方。到目前为止，我已经完成了我的菜单，并且我有带有图片的框，但问题是当你第一次加载页面时，小框中的所有图片都会在下面加载，当你点击任何框时 - 它们消失并且只加载选定的图片，这是应该的。所以我的问题是我无法让页面在第一次加载时不加载所有这些图片。我不介意它只加载其中一个，但不是全部。我已经尝试修复它 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";
}
}
}
最佳答案
您可以简单地通过 CSS 隐藏它们。
#bigimages > div:not(:first-child) { display: none; }
这应该只显示第一个大图像。如果您向图像包装器添加一个类，可能会更容易。假设该类可以是 big-image-wrap，则 css 将是:
#bigimages > div.big-image-wrap { display: none; }
#bigimages > div.big-image-wrap:first-child { display: block; }
关于javascript - 第一次打开时加载所有图片的简单图库，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28817842/
25
4
0
我开始学习 Oracle JavaSE 认证考试。 我创建了一个 IntelliJ Idea 项目来处理我的训练源代码。我想尽量减少 IntelliJ Idea 的帮助。 我只想使用:颜色语法、终端选
默认情况下，.DPR 和 .DPROJ 的文件扩展名描述是相同的，因此在资源管理器中打开具有相同基本名称的项目文件时，两个文件描述都会列为“Delphi 项目文件”，这提供了一个选择开发人员 - 要打
我目前正在从 android 网站了解 Navigation Drawer，我正在使用他们的示例 http://developer.android.com/training/implementing-
我需要帮助。 我在 A3:A500 列中有单词和数字 我需要改变他们的名字。 如果单元格包含单词“previ”，则如果单元格是数字，则将字母“p”放入新列中。如果它是一个词，那么不要放“p” ...就
我正在尝试编写一些 VBA，它允许按钮添加一个空行，保持相同的格式，就在 SUM 公式所在的行上方。 到目前为止，我实现了创建一个空行，但我不知道如何实现代码以让该新行继承相同的格式样式(包括边框和格
我在共享网络驱动器上有两个工作簿: 工作簿 A(表) 工作簿 B(数据透视表 - 连接到源工作簿 A) 我正在尝试，当打开 Workbook B 时，运行宏并执行以下操作: 取消保护工作簿 B 上的某
我正在开发一个需要在在线/离线模式下进行测试的应用程序，所以我想知道是否有任何方法可以打开/关闭 iPad 模拟器的互联网连接(不关闭我的 MAC 的互联网服务)。请帮忙 最佳答案 不，模拟器使用与您
我需要对目录的所有文件执行我的脚本(搜索)。以下是有效的方法。我只是问哪个最好。 (我需要格式的文件名:parsedchpt31_4.txt) 全局: my $parse_corpus; #(for
在我的代码中，我想有条件地执行一些操作: #ifdef DEBUG NSLog(@"I'm in debug mode"); #endif 我已配置“项目”->“编辑项目设置”->“构建”选项卡，以便
我编写了一个小程序来比较笔记本电脑的性能。为了使程序CPU更加密集，我用一些多线程代码(通过Parallel API实现)实现了Rabin-Karp模式匹配算法。 我注意到，当在关闭编译器优化标志的情
使用以下代码来关闭模态并打开第二个模态。总是遇到同样的问题可以关闭一个但不能打开第二个，或者如果我更改顺序我可以打开一个但不能关闭另一个。 (我想我已经尝试过101版本了)。如果有人能帮忙的话。
blue sky 默认情况下，当指针悬停时显示标题。 是否可以切换它，例如: $('#button').on('click', function(){ if (something) {turn
我正在编写一个简单的宏，它将打开、保存和关闭一个 Excel 文件(例如 myworkbook.xlsx)，但我无法执行此操作。我的文件 myworkbook.xlsx 位于以下位置: C:\User
我正在加载两个 geoJson 层 - 出于测试目的，两个层都是相同的数据，但是是从两个不同的 json 文件中提取的。当我在图层 Controller 中打开和关闭图层时，图层的绘制顺序会发生变化。
我在我的设置 Activity 中发现，当用户单击 ToggleButton 时，它应该在整个应用程序中静音，但它不起作用。我在教程类中放入的 SoundPool onClick 按钮声音仍在 onC
我有一部双卡手机。如果我想打开飞行模式，两个 SIM 卡都会发生这种情况。 是否可以通过编程方式仅对一张SIM卡进行操作(用户可以选择两者之一)？我看到了here上的帖子，他们一直工作到 API 16
我目前正在开发一个带有一些 pipe() 和重定向的 C shell 程序。 我使用 dup2() stdout 和 stderr (1 & 2) 重定向。 当我用 int fd = open("te
Jquery: 有没有办法捕获浏览器打开“打开/另存为”对话框时触发的事件？ Open/Save dialog example http://qpack.orcanos.com/helpcenter/
我知道你可以用 window.close 关闭 window.open 但还有其他方法吗？我有一个打开 facebook 连接的弹出窗口，我想在用户连接到 facebook 时关闭弹出窗口，然后刷新父
我搜索一个事件，如果不存在，则搜索一种方法来了解屏幕是否关闭(电源选项 - 控制面板 - 关闭显示设置)。 这些解决方案都不适合我。 所以要么我在某个地方错了，要么就是不合适。 How to get
我是一名优秀的程序员,十分优秀！