现在的位置: 网页制作教程网站制作经验 >正文
jquery相关教程

点击缩略图不显示大图的原因分析和解决办法

发表于2016/12/14 网站制作经验 0条评论 ⁄ 热度 1,094℃

通过 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 标签的鼠标样式。

  • 暂无评论