我一直在寻找一个非常简单/轻量级的方式只是可以点击缩略图切换大图的src。
我还没有真正尝试过了呢。 这是最好的解决办法吗？
较大的图像被交换在将具有相同的宽度，但不同的高度。 这会带来问题，/是不是我需要添加此功能？ 它会更好做背景图像的是，CDS，是最大图像高度的DIV？
此外，有人说，它只能一次（？）...我需要它在一定的图像上启动了，然后就可以切换到其他2-4图像缩略图上点击。
感谢您的任何意见！ 我当然（明显）没有使用Javascript作家。
你应该能够如你所愿切换图像多次。
您引用一段代码替换#target的图像源，具有#thumbs DIV内的链接的href。 它应该很好地工作。
<img id="target" src="images/main.jpg">
<div id="thumbs">
<a href="images/picture1_big.jpg"><img src="images/picture1_small.jpg"></a>
<a href="images/picture2_big.jpg"><img src="images/picture2_small.jpg"></a>
<a href="images/picture3_big.jpg"><img src="images/picture3_small.jpg"></a>
</div>
现在，只要宽度和高度，我敢肯定有与浏览器如何处理定义的宽度一些跨浏览器的兼容性问题，但未定义的高度，当你换出的图像。
在Firefox中，以下的作品。 普通的旧的javascript，jquery的无：
<html>
<head>
<script type="text/javascript">
function swap(image) {
document.getElementById("main").src = image.href;
}
</script>
</head>
<body>
<img id="main" src="images/main.jpg" width="50">
<a href="images/picture1_big.jpg" onclick="swap(this); return false;"><img src="images/picture1_small.jpg"></a>
<a href="images/picture2_big.jpg" onclick="swap(this); return false;"><img src="images/picture2_small.jpg"></a>
<a href="images/picture3_big.jpg" onclick="swap(this); return false;"><img src="images/picture3_small.jpg"></a>
</body>
</html>
这个例子消除点击缩略图后装载时间：
HTML：
<div id="big-image">
<img src="http://lorempixel.com/400/200/sports/1/">
<img src="http://lorempixel.com/400/200/fashion/1/">
<img src="http://lorempixel.com/400/200/city/1/">
</div>
<div class="small-images">
<img src="http://lorempixel.com/100/50/sports/1/">
<img src="http://lorempixel.com/100/50/fashion/1/">
<img src="http://lorempixel.com/100/50/city/1/">
</div>
使用Javascript：
$(function(){
$("#big-image img:eq(0)").nextAll().hide();
$(".small-images img").click(function(e){
var index = $(this).index();
$("#big-image img").eq(index).show().siblings().hide();
});
});
http://jsfiddle.net/Qhdaz/2/
