我一直在寻找一种非常简单/轻量级的方法,只需单击缩略图即可切换较大图像的src.
>这是我发现的：
http://snipplr.com/view/8688/jquery-image-swap/
我还没有尝试过.这是最好的解决方案吗？
要交换的较大图像将具有相同的宽度但具有不同的高度.这会导致问题/我需要为此功能添加一些内容吗？使用背景图像进行交换并且是最大图像的高度会更好吗？
另外,有人说它只能工作一次(??)……我需要它开始某个图像,然后能够在缩略图点击时更改为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>