Jquery幻灯片效果

Jquery幻灯片效果（效果和上一次说的视频展示效果原理差不多，一个是向左右，现在的是像上（TOP），改变TOP值）

<div class="ad" >
			 <ul class="slider" >
				<li><img src="images/ads/1.gif"/></li>
				<li><img src="images/ads/2.gif"/></li>
				<li><img src="images/ads/3.gif"/></li>
				<li><img src="images/ads/4.gif"/></li>
				<li><img src="images/ads/5.gif"/></li>
			  </ul>
			  <ul class="num" >
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
			  </ul>
		</div>

下面是JS代码

$(function(){
   var index=0;
   var timed;
   var len=$(".num li").length;
   $(".num>li").mouseover(function(){
   index=$(".num li").index(this);
   showImg(index);
 }).eq(0).mouseover();
//滑入 停止动画，滑出开始动画.
	 $('.ad').hover(function(){
			 clearInterval(adTimer);//清除
		 },function(){
			 adTimer = setInterval(function(){
			    showImg(index)
				index++;
				if(index==len){index=0;}//当是最后一张时
			  } , 3000);
	 }).trigger("mouseleave");//加上离开后触发事件
})
function showImg(index){
    var adHeight=$(".ad").height();//取得高度
    //$("slider").stop(true,false).animage({top:-adHeight*index},1000);
	$(".slider").stop(true,false).animate({top : -adHeight*index},1000);
    $(".num li").removeClass("on")
    .eq(index).addClass("on");
}