應 幽狼魔獸?站長所托，寫了一個 廣告切換效果（點擊查看DEMO）??形式是常見的形式，但是在功能上有一定的拓展。

主要功能：

1，自動檢測廣告圖片個數 生產廣告序列
2，緩動切換，仿原版FLASH 效果?
3，自動按照設置周期播放
4，鼠標劃入停止自動播放 鼠標移走恢復自動播放
其中第一個功能擴展比較實用,這樣就沒有必要分別 更新圖片 和 圖片個數了。
應用了 jQuery 的 easing 插件 ?
貼一下程序代碼 ：

Code
$(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));
????}????
????
????$('#flsad').hover(function(){
??????????????if(MyTime){
?????????????????clearInterval(MyTime);
??????????????}
?????},function(){
??????????????MyTime?=?setInterval(function(){
????????????????move()
????????????????index++;
????????????????if(index==num){index=0;}
??????????????}?,?speed);
?????});
?????//自動開始?
?????var?MyTime?=?setInterval(function(){
????????move();
????????index++;
????????if(index==num){index=0;}
?????}?,?speed);?????

?

轉載于:https://www.cnblogs.com/trance/archive/2009/05/25/1489036.html

總結

以上是生活随笔為你收集整理的给ULWOW 写的广告效果（缓动切换）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。