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

168 阅读 0 评论 111 点赞

我是靠谱客的博主土豪铅笔，最近开发中收集的这篇文章主要介绍广告切换效果(缓动切换)，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

主要功能：

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