广告切换效果(缓动切换)_广告代码-js教程-PHP中文网

广告切换效果(缓动切换)_广告代码

php中文网

发布： 2016-05-16 18:52:18

原创

1761人浏览过

主要功能：

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        if(i            nums+=""+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);     
})

在线演示
打包下载