给ULWOW 写的广告效果（缓动切换）

应幽狼魔兽站长所托，写了一个广告切换效果（点击查看DEMO）形式是常见的形式，但是在功能上有一定的拓展。

主要功能：

1，自动检测广告图片个数生产广告序列
2，缓动切换，仿原版FLASH 效果
3，自动按照设置周期播放
4，鼠标划入停止自动播放鼠标移走恢复自动播放
其中第一个功能扩展比较实用,这样就没有必要分别更新图片和图片个数了。
应用了 jQuery 的 easing 插件
贴一下程序代码：

Code
$(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();
        }
    })

转载于:https://www.cnblogs.com/trance/archive/2009/05/25/1489036.html

给ULWOW 写的广告效果（缓动切换）相关推荐

JQuery实现广告效果（滚动切换）
JQuery实现广告效果(滚动切换) Html+css 效果如上图代码: Java代码 <!DOCTYPE html> <html> <head lang=&quo ...
用缓动函数模拟物理动画
1.缓动函数简介 <1>缓动函数的动画效果是建立在CALayer层级的关键帧动画基础之上也就是说用普通的UIView的Animation是无法直接实现缓动函数 <2>缓动函数 ...
JavaScript Tween算法及缓动效果
Flash做动画时会用到Tween类,利用它可以做很多动画效果,例如缓动.弹簧等等. 我这里要教大家的是怎么利用flash的Tween类的算法,来做js的Tween算法,并利用它做一些简单的缓动效果. ...
javascript的缓动效果
这部分对原先的缓动函数进行抽象化,并结合缓动公式进行强化.成品的效果非常惊人逆天.走过路过不要错过. 好了,打诨到此为止.普通的加速减速是难以让人满意的,为了实现弹簧等让人眼花缭乱的效果必须动用缓动公 ...
简单动画函数封装及缓动效果
function animate(obj, target) {clearInterval(obj.timer);//obj.timer = setInterval(function() {var ti ...
JS实现动画特效2（缓动函数封装、导航栏筋斗云效果）
JS实现的动画特效:手风琴特效展示图片.筋斗云动画一.小知识 1.浏览器的offsetLeft是就近取整,要实现向上取整或向下取整,可以调用Math.ceil()或Math.floor() 2.想要 ...
javascript 45种缓动效果BY司徒正美
javascript 45种缓动效果参数类型说明 el element 必需,为页面元素 begin number 必需,开始的位置 change number 必需,要移动的距离 durati ...
网页轮播图+缓动效果
实现某宝上面的网页轮播图+缓动效果代码和注释: <!DOCTYPE html> <html lang="en"><head><meta ...
软件项目技术点(1)——Tween算法及缓动效果
AxeSlide软件项目梳理 canvas绘图系列知识点整理 Tween算法及缓动效果软件里在切换步序时需要有过渡动画效果,从当前位置的画面缓动到目标位置的画面.动画效果可重新查看文章系列第一篇 ...

给ULWOW 写的广告效果（缓动切换）

给ULWOW 写的广告效果（缓动切换）相关推荐

最新文章

热门文章