通过 jquery 方法实现一个简单的图片展示效果，页面初始加载时显示一张展示大图及几张缩略小图，点击缩略小图，展示大图自动替换为当前缩略小图对应的大图。
通过以下方法实现，在 IE7 及以上版本浏览器中测试通过，但在 IE6 版本的浏览器中，点击缩略小图后，展示大图却不显示，需在大图位置点击鼠标右键选择“显示图片”才行。
本文主要是点击缩略图不显示大图的原因分析和解决办法。
<img id="BigImg" src="img/b1.jpg" alt="产品大图">
<a href="javascript:void(0)">
<img class="SmallImg" src="img/s1.jpg" bigurl="img/b1.jpg" alt="产品缩略图1">
</a>
<a href="javascript:void(0)">
<img class="SmallImg" src="img/s2.jpg" bigurl="img/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="img/s1.jpg" bigurl="img/b1.jpg" alt="产品缩略图1"> </a> <a href="#"> <img class="SmallImg" src="img/s1.jpg" bigurl="img/b1.jpg" alt="产品缩略图1"> </a>
解决方法其实很简单，a 标签不行，变通一下，将 a 标签换成 span 或其他标签试试，如：
<span style="cursor:pointer"> <img class="SmallImg" src="img/s1.jpg" bigurl="img/b1.jpg" alt="产品缩略图1"> </span>
问题是不是解决了，span 加入的 cursor:pointer CSS样式是为了模拟 a 标签的鼠标样式。
声明:如需转载，请注明来源于www.webym.net并保留原文链接：http://www.webym.net/jiaocheng/360.html
