广告切换效果(缓动切换)

主要功能：

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

在线演示
打包下载