主要功能:
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" 0 (i 1) ""; } else{ nums ="" (i 1) ""; } } 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); })
在线演示
打包下载