通过 jquery 方法实现一个简单的图片展示效果，页面初始加载时显示一张展示大图及几张缩略小图，点击缩略小图，展示大图自动替换为当前缩略小图对应的大图。

通过以下方法实现，在 IE7 及以上版本浏览器中测试通过，但在 IE6 版本的浏览器中，点击缩略小图后，展示大图却不即显示，需在大图位置点击鼠标右键选择“显示图片”才行。

部份实现代码摘要如下：

<img id="BigImg" src="test/b1.jpg" alt="产品大图">

<a href="javascript:void(0)">
   <img class="SmallImg" src="test/s1.jpg" bigurl="test/b1.jpg" alt="产品缩略图1">
</a>

<a href="javascript:void(0)">
   <img class="SmallImg" src="test/s2.jpg" bigurl="test/b2.jpg" alt="产品缩略图2">
</a>

<script type="text/javascript">
	$(document).ready(function(){
	   //点击缩略图显示对应的产品大图
	   $(".SmallImg").click(function(){
	      $("#BigImg").attr("src",$(this).attr("bigurl"));
	   });
	});
</script>

IE6 浏览器产生以上问题的原因为：

如果 img 标签外使用了 a 标签，a 标签 href 值为 javascript:void(0) 或 #  会导致 IE6 认为当前页面刷新或重定向了，新图加载也就被阻止了。

以下 2 种用法在 IE6 中都会出现这种加载不了图片的情况：

<a href="javascript:void(0)">
   <img class="SmallImg" src="test/s1.jpg" bigurl="test/b1.jpg" alt="产品缩略图1">
</a> 

<a href="#">
   <img class="SmallImg" src="test/s1.jpg" bigurl="test/b1.jpg" alt="产品缩略图1">
</a>

解决方法其实很简单，a 标签不行，变通一下，将 a 标签换成 span 或其他标签试试，如：

<span style="cursor:pointer"> 
   <img class="SmallImg" src="test/s1.jpg" bigurl="test/b1.jpg" alt="产品缩略图1"> 
</span>

问题是不是解决了，span 加入的 cursor:pointer CSS样式是为了模拟 a 标签的鼠标样式。