广告切换效果(缓动切换)

  主要功能:

  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);

  })

  在线演示

  打包下载