【js与jquery】幻灯片轮播切换效果

<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>

/*首页广告效果*/
/*
1.当光标滑过数字1时，需要显示第一张图片；当光标滑过数字2时，需要显示第二张图片；以此类推。因此，如果能正确获取到
当前滑过的数字，那么完成该效果就容易多了
2.首先定义一个showImage()函数，然后给函数传递一个参数index，index代表当前要显示图片的索引。获取当前滑过的<li>元
素在所有<li>元素中的索引可以使用jquery的index()方法来获取。其中.eq(0).mouseover()部分是用来初始化的，让第一个数
字高亮并显示第一个广告。如果需要，可以修改eq()中的数字来让页面默认显示任意一个广告
3.当光标在广告右下角的数字上滑过时，广告就会有上下翻动的效果，但是如果不去碰它，那么广告始终不会动，因此需要使用
trigger()方法来触发一下
*/
$(function(){
var len  = $(".num > li").length;
var index = 0;
var adTimer;
$(".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++;//没调用一次，给index加1
//如果index的大小已经等于广告展示的总数量，那么把index设置为零，让广告效果又重新开始
if(index==len){index=0;}
} , 3000);
}).trigger("mouseleave");//自动触发hover的第二个函数
})
// 通过控制top ，来显示不同的幻灯片
function showImg(index){
var adHeight = $(".content_right .ad").height();//获取产品广告的高度
//使用animate来达到动画效果,每个图片滚动的高度有所不同，可以通过传入的参数index的值乘以产品广告的高度来得到
//stop(true,false):主要是为了将未执行完的动画队列清空，但不将正在执行的动画跳转到末状态
$(".slider").stop(true,false).animate({top : -adHeight*index},1000);
//给当前的广告数字添加高亮样式
$(".num li").removeClass("on")
.eq(index).addClass("on");
}