通過(guò) jquery 方法實(shí)現(xiàn)一個(gè)簡(jiǎn)單的圖片展示效果，頁(yè)面初始加載時(shí)顯示一張展示大圖及幾張縮略小圖，點(diǎn)擊縮略小圖，展示大圖自動(dòng)替換為當(dāng)前縮略小圖對(duì)應(yīng)的大圖。

通過(guò)以下方法實(shí)現(xiàn)，在 IE7 及以上版本瀏覽器中測(cè)試通過(guò)，但在 IE6 版本的瀏覽器中，點(diǎn)擊縮略小圖后，展示大圖卻不即顯示，需在大圖位置點(diǎn)擊鼠標(biāo)右鍵選擇“顯示圖片”才行。

部份實(shí)現(xiàn)代碼摘要如下：

<img id="BigImg" src="test/b1.jpg" alt="產(chǎn)品大圖">

<a href="javascript:void(0)">
   <img class="SmallImg" src="test/s1.jpg" bigurl="test/b1.jpg" alt="產(chǎn)品縮略圖1">
</a>

<a href="javascript:void(0)">
   <img class="SmallImg" src="test/s2.jpg" bigurl="test/b2.jpg" alt="產(chǎn)品縮略圖2">
</a>

<script type="text/javascript">
	$(document).ready(function(){
	   //點(diǎn)擊縮略圖顯示對(duì)應(yīng)的產(chǎn)品大圖
	   $(".SmallImg").click(function(){
	      $("#BigImg").attr("src",$(this).attr("bigurl"));
	   });
	});
</script>

IE6 瀏覽器產(chǎn)生以上問(wèn)題的原因?yàn)椋?

如果 img 標(biāo)簽外使用了 a 標(biāo)簽，a 標(biāo)簽 href 值為 javascript:void(0) 或 #  會(huì)導(dǎo)致 IE6 認(rèn)為當(dāng)前頁(yè)面刷新或重定向了，新圖加載也就被阻止了。

以下 2 種用法在 IE6 中都會(huì)出現(xiàn)這種加載不了圖片的情況：

<a href="javascript:void(0)">
   <img class="SmallImg" src="test/s1.jpg" bigurl="test/b1.jpg" alt="產(chǎn)品縮略圖1">
</a> 

<a href="#">
   <img class="SmallImg" src="test/s1.jpg" bigurl="test/b1.jpg" alt="產(chǎn)品縮略圖1">
</a>

解決方法其實(shí)很簡(jiǎn)單，a 標(biāo)簽不行，變通一下，將 a 標(biāo)簽換成 span 或其他標(biāo)簽試試，如：

<span style="cursor:pointer"> 
   <img class="SmallImg" src="test/s1.jpg" bigurl="test/b1.jpg" alt="產(chǎn)品縮略圖1"> 
</span>

問(wèn)題是不是解決了，span 加入的 cursor:pointer CSS樣式是為了模擬 a 標(biāo)簽的鼠標(biāo)樣式。