Javascript:单击缩略图可切换大图.最好的方法? [英] Javascript: Clicking thumbnails to switch a larger image. Best method?
问题描述
我一直在寻找一种非常简单/轻巧的方法，只需单击缩略图即可切换较大图像的src.
I've been looking for a really easy/lightweight way to just be able to click thumbnails to switch the src of a larger image.
- This is what I've found: http://snipplr.com/view/8688/jquery-image-swap/
我实际上还没有尝试过.这是最好的解决方案吗?
I haven't actually tried it out yet. Is this the best solution?
要交换的较大图像将具有相同的宽度但具有不同的高度.这会引起问题吗/我需要为此功能添加一些东西吗?最好将div与背景图像进行互换，并且将其换成最大图像的高度?
The larger images to be swapped in will have the same width but a different height. Will this cause problems/is there something I need to add for this functionality? Would it be better to do a div with a background-image that swaps and is the height of the largest image?
另外，有人说它只能运行一次(??)...我需要它从某个图像开始，然后单击缩略图就可以更改为2-4个其他图像.
Also, someone said that it only works once (??)... I'd need it to start out on a certain image, then be able to change to 2-4 other images on thumbnail click.
感谢您的任何建议！我当然(显然)没有Javascript作家.
Thanks for any advice! I'm certainly (obviously) no Javascript writer.
推荐答案
您应该能够根据需要多次切换图像.
You should be able to switch images as many times as you wish.
您引用的代码段将#target的图像源替换为#thumbs div中的链接的href.它应该可以正常工作.
The piece of code you reference replaces the image source of #target, with the href of a link within a #thumbs div. It should work fine.
<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>
现在，就宽度和高度而言，我很确定在交换图像时浏览器如何处理定义的宽度但不确定的高度方面存在一些跨浏览器的兼容性问题.
Now as far as width and height, I am pretty sure there are some cross-browser compatibility issues with how browsers handle a defined width, but an undefined height, when you swap out the images.
在firefox中，以下工作.普通的旧javascript，没有jquery:
In firefox, the following works. Plain old javascript, no 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>
这篇关于Javascript:单击缩略图可切换大图.最好的方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
