主要功能：

1，自动检测广告图片个数 生产广告序列

2，缓动切换，仿原版FLASH 效果

3，自动按照设置周期播放

4，鼠标划入停止自动播放 鼠标移走恢复自动播放

其中第一个功能扩展比较实用,这样就没有必要分别 更新图片 和 图片个数了。

应用了 jQuery 的 easing 插件

贴一下程序代码 ：

复制代码 代码如下:

$(document).ready(function(){

var MyTime=false;//定时器

var piclist=$("#piclist"); //图片列表

var num=piclist.find("li").length; //自动检测图片广告个数

var picnum=$("#picnum");

var index=0; //起始序列

var width=388; //广告宽度

var movetime=600; //单次动画所用时间

var speed=3000; //切换时间间隔

//标记当前

function cur(ele){

ele=$(ele)? $(ele):ele;

ele.addClass("cur").siblings().removeClass("cur");

}

function int(){

piclist.css({"width":width*num+"px"});

var nums="";

for(i=0; i<num; i++){

if(i<9){

nums+="<span>"+0+(i+1)+"</span>";

} else{

nums+="<span>"+(i+1)+"</span>";

}

}

picnum.html(nums);

cur(picnum.find("span").eq(index));

}

//初始化执行

int();

$(picnum.find("span")).mouseover(function(){

index=$("#picnum span").index($(this)[0]);

//if(!piclist.is(":animated")){

move();

//}

})

var move=function move(){

piclist.animate({"left":-width*index+"px"},{queue:false,duration:movetime, easing: "easeOutQuart"});

cur(picnum.find("span").eq(index));

}

$('div.flsad').hover(function(){

if(MyTime){

clearInterval(MyTime);

}

},function(){

MyTime = setInterval(function(){

move()

index++;

if(index==num){index=0;}

} , speed);

});

//自动开始

MyTime = setInterval(function(){

move();

index++;

if(index==num){index=0;}

} , speed);

})

在线演示

打包下载