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时，需要显示第1张图片,当光标滑过数字2时，需要显示第2张图片。以此类推。
如果能正确获取到当前滑过的数字，那么完成该效果就非常简单了。

$(function(){
   var index=0;
   $(".num li").mouseover(function(){ 
      showImg(index);
   }).eq(0).mouseover();
})
//定义了一个showImg()函数，然后给函数传递了一个参数index,index代表当前要显示图片的索引。获取当前滑过的<li>元素在所有的<li>元素中的索引可以使用jQuery的index()方法来获取。
其中.eq(0).mouseover()部分是用来初始化。让第1个数字高亮并显示第1个广告，如果需要可以修改eq()方法中的数字来让页面默认显示任意一个广告。

代码如下:
var index=0;
$(".num li").mouseover(function(){
  index=$(".num li").index(this);
  showimg(index);
}).eq(0).mouseover();
接下来完成showImg()函数，showImg()函数代码如下:
function showimg(index){
  var adheight = $(".content_right .ad").height();
  $(".slider").stop(true,false).animate({top:-adHeight*index},1000);
  $(".num li").removeClass("on");
  .eq(index).addClass("on");
}

首先用$(".content_right .ad").height()方法获取产品广告的高度，然后使用animate()方法来达到动画效果，
每个图片滚动的高度有所不同，可以通过传入的参数index的值乘以产品广告的高度来得到，在animate()方法前，
使用stop(true,false)方法将未执行完成的动画队列清空。但不将正在执行的动画跳转到未状态，
最后使用$(".num li").eq(index).addClass("on").removeClass("on");来给当前的广告数字添加高亮样式。

现在，当光标在广告右下角的数字滑过时，广告就会有上下翻转的效果。但如果不去碰它，
那么广告始终不会动，因此接下来需要为广告添加自动执行效果，自动执行与做"最新动态"时的新闻列表类似，
可以使用trigger()方法来触发，因此可以写出类似的代码，代码如下所示:
var adTimer;
$('.ad').hover(function(){
   clearInterval(adTimer);
},function(){

 adTime= setInterval(function(){
  //
 },3000);
}).trigger("mouseleave");

setInterval()方法的第1个参数中，需要实现以下功能。
1.调用showImg(index)来显示广告效果
2.每调用一次，给index 加1
如果index的大小等于广告展示的总数量，那么重头开始 设置index为0
adtimer = setInterval(function(){
 showImg(index);
 index++;
 if(index==len){
   index=0;
 }
})

最终完整代码如下:
$(function(){
   var len = $(".num>li").length;
   var inex = 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++;
	if(index==len)
	{
	  index=0;
	}
       })
    }).trigger("mouseleave");
})

//通过控制top来显示不同的幻灯片
function showImg(index){
  var adHeight = $(.content_right .ad).height();
  $(".slider").stop(true,false).animate({top:-adHeight*index},1000);
  $(".num li").removeClass("on")
  .eq(index).addClass("on");

}

运行代码后，当光标滑入广告数字时，会显示不同的广告图片，当光标不碰到它时，广告图片
会自动的切换。