效果图

jquery插件

https://download.csdn.net/download/Messchao/25731245

html代码

<div class="king"><ul><li class="current"><a href="#"><img src="img/m1.jpg" alt="" class="small"><img src="img/m.png" alt="" class="big"></a></li><li><a href="#"><img src="img/l1.jpg" alt="" class="small"><img src="img/l.png" alt="" class="big"></a></li><li><a href="#"><img src="img/c1.jpg" alt="" class="small"><img src="img/c.png" alt="" class="big"></a></li><li><a href="#"><img src="img/w1.jpg" alt="" class="small"><img src="img/w.png" alt="" class="big"></a></li><li><a href="#"><img src="img/z1.jpg" alt="" class="small"><img src="img/z.png" alt="" class="big"></a></li><li><a href="#"><img src="img/h1.jpg" alt="" class="small"><img src="img/h.png" alt="" class="big"></a></li><li><a href="#"><img src="img/t1.jpg" alt="" class="small"><img src="img/t.png" alt="" class="big"></a></li></ul>
</div>

css代码

<style type="text/css">* {margin: 0;padding: 0;}img {display: block;}ul {list-style: none;}.king {width: 852px;margin: 100px auto;background: url(img/bg.png) no-repeat;overflow: hidden;padding: 10px;}.king ul {overflow: hidden;}.king li {position: relative;float: left;width: 69px;height: 69px;margin-right: 10px;}.king li.current {width: 224px;}.king li.current .big {display: block;}.king li.current .small {display: none;}.big {width: 224px;display: none;}.small {position: absolute;top: 0;left: 0;width: 69px;height: 69px;border-radius: 5px;}/*插件引入*/<script src="jquery.min.js"></script>
</style>

js代码

<script type="text/javascript">$(function () {$(".king li").mouseover(function () {//鼠标经过某个Li 增加动画width，为后面图片的淡入做准备$(this).stop().animate({//切换为大图标的尺寸width: 224//当前li 的小图片 淡出 大图片 淡入}).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn()$(this).siblings("li").stop().animate({//切换为小图标的尺寸width: 69//当前li 的小图片 淡入 大图片 淡出}).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut()})})
</script>