|
|
1，自動檢測廣告圖片個數(shù) 生產(chǎn)廣告序列
2，緩動切換，仿原版FLASH 效果
3，自動按照設(shè)置周期播放
4，鼠標(biāo)劃入停止自動播放 鼠標(biāo)移走恢復(fù)自動播放
其中第一個功能擴(kuò)展比較實(shí)用,這樣就沒有必要分別 更新圖片 和 圖片個數(shù)了。
應(yīng)用了 jQuery 的 easing 插件
貼一下程序代碼 ：
復(fù)制代碼 代碼如下:
$(document).ready(function(){
var MyTime=false; //定時器
var piclist=$("#piclist"); //圖片列表
var num=piclist.find("li").length; //自動檢測圖片廣告?zhèn)€數(shù)
var picnum=$("#picnum");
var index=0; //起始序列
var width=388; //廣告寬度
var movetime=600; //單次動畫所用時間
var speed=3000; //切換時間間隔
//標(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);
});
//自動開始
MyTime = setInterval(function(){
move();
index++;
if(index==num){index=0;}
} , speed);
})
在線演示
打包下載
JavaScript技術(shù)：廣告切換效果(緩動切換)，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
