快捷導(dǎo)航

廣告切換效果(緩動(dòng)切換)

更新時(shí)間：2009年05月27日 17:09:09 作者：

寫了一個(gè) 廣告切換效果（點(diǎn)擊查看DEMO）形式是常見的形式，但是在功能上有一定的拓展。

主要功能：

1，自動(dòng)檢測(cè)廣告圖片個(gè)數(shù) 生產(chǎn)廣告序列
2，緩動(dòng)切換，仿原版FLASH 效果
3，自動(dòng)按照設(shè)置周期播放
4，鼠標(biāo)劃入停止自動(dòng)播放鼠標(biāo)移走恢復(fù)自動(dòng)播放
其中第一個(gè)功能擴(kuò)展比較實(shí)用,這樣就沒有必要分別更新圖片和圖片個(gè)數(shù)了。
應(yīng)用了 jQuery 的 easing 插件

貼一下程序代碼：

復(fù)制代碼代碼如下:

$(document).ready(function(){ 
    var MyTime=false;    //定時(shí)器                 
    var piclist=$("#piclist"); //圖片列表 
    var num=piclist.find("li").length; //自動(dòng)檢測(cè)圖片廣告?zhèn)€數(shù) 
    var picnum=$("#picnum"); 
    var index=0; //起始序列 
    var width=388; //廣告寬度 
    var movetime=600; //單次動(dòng)畫所用時(shí)間 
    var speed=3000; //切換時(shí)間間隔     

     
//標(biāo)記當(dāng)前 
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)); 
    } 
//初始化執(zhí)行     
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); 
     }); 
     //自動(dòng)開始 
     MyTime = setInterval(function(){ 
        move(); 
        index++; 
        if(index==num){index=0;} 
     } , speed);     
})