主要功能： 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<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)); } $('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 兼容firefox的一些问题

比如: 1. document.all() 在FF里不行. 必须改成document.getElementById(); 2. obj.innerText = "XXX"; 在FF里好像偶尔也有问题. 换成obj.innerHTML = "XXX";就行了. 3. var olE = document.body.onload; 获得body>>>详细阅读

本文标题：广告切换效果(缓动切换)

地址：http://www.17bianji.com/kaifa2/JS/28659.html

 1/2    1