我正在尝试建立这个画廊：
如何使用 jquery 构建此图片库，并根据文件夹中的图片数量自动填充缩略图？我想单击缩略图并让它打开一个新页面或具有更大图像的 div。
我还想让每个缩略图一个接一个地淡入。
【问题讨论】：
标签： jquery image-gallery
此答案仅适用于您问题的 HTML/CSS/jQuery 部分。
如果您想在文件夹中显示图像而不是迷你 Google 徽标，则需要一些用 PHP 或 ASP.NET 等语言编写的简单服务器端代码。如果你使用 PHP，我可以为你写这个。
我已经在 IE7/8、Firefox、Chrome 中测试过了。
我尽量保持简单，同时尽量保留您要求的详细信息：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo Gallery</title>
<style type="text/css">
html, body {
margin: 0; padding: 0; border: 0
}
#container {
border: 1px solid red;
background: #eee;
width: 377px;
height: 355px;
padding: 0 0 5px 0;
overflow-y: scroll
}
#container img {
border: 1px solid red;
float: left; margin: 5px 0 0 5px
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//fill container with test images
$('#container').append(new Array(60).join('<a href="http://www.google.com/images/logos/ps_logo2.png" target="_blank"><img src="http://www.google.com/images/logos/ps_logo2.png" width="64" height="64" /></a>'))
var $images = $('#container img');
$images.hide();
$images.each(function(index) {
$(this).delay(index * 50).fadeIn();
});
});
</script>
</head>
<body>
<div id="container">
<a href="http://www.google.com/images/logos/ps_logo2.png" target="_blank"><img src="http://www.google.com/images/logos/ps_logo2.png" width="64" height="64" /></a>
</div>
</body>
</html>
回复您的 cmets：Live Demo #2
【讨论】：
for (var i=1; i<400; i++) { $('#container').append('<a href="thumbs/'+i+'.jpg" target="_blank"><img src="thumbs/'+i+'.jpg" width="35" height="35" style="margin-bottom:0px; margin-left: 4px; padding: 0px"/></a>') }