请转载此文的朋友务必附带原文链接，谢谢。

原文链接：http://xuyran.blog.51cto.com/11641754/1861924

这里我只把关键代码给贴出来。

html:

<divclass="hot-exchange"><ul><liclass="activeclear"><ahref=""><divclass="range"><p>排名</p></div><divclass="goods-title"><p>放逐之刃</p><p>16800C豆</p></div><divclass="goods-img"><imgsrc="../Content/p_w_picpaths/123_u4776.png"alt=""/></div></a></li><liclass="clear"><ahref=""><divclass="range"><p>排名</p></div><divclass="goods-title"><p>放逐之刃</p><p>16800C豆</p></div><divclass="goods-img"><imgsrc="../Content/p_w_picpaths/123_u4776.png"alt=""/></div></a></li><liclass="clear"><ahref=""><divclass="range"><p>排名</p></div><divclass="goods-title"><p>放逐之刃</p><p>16800C豆</p></div><divclass="goods-img"><imgsrc="../Content/p_w_picpaths/123_u4776.png"alt=""/></div></a></li><liclass="clear"><ahref=""><divclass="range"><p>排名</p></div><divclass="goods-title"><p>放逐之刃</p><p>16800C豆</p></div><divclass="goods-img"><imgsrc="../Content/p_w_picpaths/123_u4776.png"alt=""/></div></a></li><liclass="clear"><ahref=""><divclass="range"><p>排名</p></div><divclass="goods-title"><p>放逐之刃</p><p>16800C豆</p></div><divclass="goods-img"><imgsrc="../Content/p_w_picpaths/123_u4776.png"alt=""/></div></a></li><liclass="clear"><ahref=""><divclass="range"><p>排名</p></div><divclass="goods-title"><p>放逐之刃</p><p>16800C豆</p></div><divclass="goods-img"><imgsrc="../Content/p_w_picpaths/123_u4776.png"alt=""/></div></a></li></ul></div>

css代码如下：

.hot-exchangeulli.active.range{width:20px;height:60px;background:url(../p_w_picpaths/u4779.png)no-repeat;}.rangep{display:none}.hot-exchangeulli.active.rangep{display:block;}.hot-exchangeulli.active.goods-img{width:67px;height:67px;}

jquery代码如下：

$(function(){//兑换专区左侧鼠标滑动效果varserialNumber=0;varserialNumberLen=6;$(".hot-exchangeulli").each(function(){serialNumber++;if(serialNumber>serialNumberLen){returnfalse;}$(this).children().find(".range").append('0'+serialNumber);$(this).mouseover(function(){$(this).addClass("active").siblings().removeClass("active");$(this).children().find(".rangep").show();$(this).siblings().children().find(".rangep").hide();})})})

效果如下：