用JS控制，点击所缩略图切换对应大图，第二次双击会隐藏大图的问题

[胖子drm]

先上相关代码：

<div class="a_img ">
                    	<div class="a_box">
                            <div class="a_pho"><img src="images/3427.jpg" alt="大尺寸图" /></div>
                            <div class="list_img">
                                <div class="list" id="thumbnail">
                                    <ul>
                                        <li class="current"><a href="images/3427.jpg"><img src="images/14fd.jpg" width="100%" height="100%" alt="缩略图" /></a></li>
                                        <li><a href="images/52347.jpg"><img src="images/41a.jpg" width="100%" height="100%" alt="缩略图" /></a></li>
                                        <li><a href="images/23463.jpg"><img src="images/234fa.jpg" width="100%" height="100%" alt="缩略图" /></a></li>
                                        <li><a href="images/3247.jpg"><img src="images/412saf.jpg" width="100%" height="100%" alt="缩略图" /></a></li>
                                        <li><a href="images/26547.jpg"><img src="images/41356a.jpg" width="100%" height="100%" alt="缩略图" /></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
					</div>

.a_img
{
    float:left;
    width:305px;
    margin-right:12px;
}

.a_box{
	width:305px;
}
.list_img
{
    float:left;
    width:305px;
	height:55px;
	overflow: hidden;
}
.a_pho{border:none;width:305px;height:183px;}
.list_img .list{float:left;width:305px;height:55px;position:relative;overflow:hidden;display:inline;}
.list_img .list ul{position:absolute;left:0;width:305px;}
.list_img .list li{float:left;width:60px;height:55px;text-align:center;}

<script>
	$(document).ready(function (){
		//点击小图切换大图
		$("#thumbnail li a").click(function(){
			$(".model_pho img").hide().attr({ "src": $(this).attr("href"), "title": $("> img", this).attr("title") });
			$("#thumbnail li.current").removeClass("current");
			$(this).parents("li").addClass("current");
			return false;
		});
		$(".model_pho>img").load(function(){
			$(".model_pho>img:hidden").show();
		});
	});
</script>

上面的代码基本上能实现点击下面的缩略图，上方自动切换大图，现在的问题是：在ie9、FF31.0下，第一次点击小图，大图能自动切换，再次点击同一张小图，大图也正常显示不隐藏；猎豹浏览器v4.7.54.8107版、chrome的37.0.2062.94 m版，第一次点击小图，大图也能自动切换，当再次点击同一张小图以后，大图就隐藏了....这个是为什么啊啊啊...有什么办法解决再次点击小图，大图还是正常显示嘛...

[Go 旅城通票]

应该是加载过图片后，从缓存读取图片chrome直接不走load事件导致大图不显示，你不隐藏大图不就好了

$(".model_pho img")/*.hide()*/.attr({ "src": $(this).attr("href"), "title": $("> img", this).attr("title") });

[胖子drm]

引用 1 楼 showbo 的回复:

应该是加载过图片后，从缓存读取图片chrome直接不走load事件导致大图不显示，你不隐藏大图不就好了

$(".model_pho img")/*.hide()*/.attr({ "src": $(this).attr("href"), "title": $("> img", this).attr("title") });

确实是这样，看来还得加把劲.