1、布局
<div class="king"><ul><li class="current"><a href="#"><img src="images/m1.jpg" alt="" class="small"><img src="images/m.png" alt="" class="big"></a></li><li><a href="#"><img src="images/l1.jpg" alt="" class="small"><img src="images/l.png" alt="" class="big"></a></li><li><a href="#"><img src="images/c1.jpg" alt="" class="small"><img src="images/c.png" alt="" class="big"></a></li><li><a href="#"><img src="images/w1.jpg" alt="" class="small"><img src="images/w.png" alt="" class="big"></a></li><li><a href="#"><img src="images/z1.jpg" alt="" class="small"><img src="images/z.png" alt="" class="big"></a></li><li><a href="#"><img src="images/h1.jpg" alt="" class="small"><img src="images/h.png" alt="" class="big"></a></li><li><a href="#"><img src="images/t1.jpg" alt="" class="small"><img src="images/t.png" alt="" class="big"></a></li></ul></div>
2、
$(function () {// 鼠标经过，当前小图片淡出，大图片淡入，宽度为224，其他的小图片淡入，大图片淡出，宽度为69$(".king li").mouseover(function () {$(this).animate({width: 224}).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn()// 其余兄弟$(this).siblings().animate({width: 69}).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut()})})