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

1.效果如图所示：

 

2.html代码：

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

3.jquery代码：

/*首页广告效果*/
/*
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");
}