|
|
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í)用,這樣就沒(méi)有必要分別 更新圖片 和 圖片個(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)開(kāi)始
MyTime = setInterval(function(){
move();
index++;
if(index==num){index=0;}
} , speed);
})
在線演示
打包下載
JavaScript技術(shù)：廣告切換效果(緩動(dòng)切換)，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
