Jquery幻灯片效果

来源：互联网发布：2012nba总决赛数据统计编辑：程序博客网时间：2024/05/16 14:44

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");}