类似QQ管家页面jquery图片显隐轮换效果

来源：互联网发布：linux设置文件为可写编辑：程序博客网时间：2024/04/29 21:43

一晃端午节又过去了，又得开始新的工作累人啊。

这两天jquery博客有不少感慨，感觉人有时要是言而无信，那不管做什么事情都不会成功的，觉得，既然说出口了，或者，暗暗下决心做了，就一定做成功。如果不行，那是自己的责任。不多说了，做个类似QQ管家页面jquery图片显隐轮换效果，感觉在哪个页面中看到过，反正是腾讯的，故加个类似。

    $(document).ready(function() {    var z = 0;    var inAnimation = false;    $('#box img').each(function() {    z++;    $(this).css('z-index', z);    });    function slide() {    if(inAnimation) return false;    else inAnimation = true;    var MaxZindex = z; SecondZindex = z-1;    $('#box img').each(function() {    if($(this).css('z-index') == MaxZindex) {    $(this).animate({left:"350px"}, 800, function() {    $(this).css('z-index', 1)    .animate({left:"0px"}, 800, function() {    inAnimation = false;    });    });    } else if($(this).css('z-index') == SecondZindex) {    $(this).animate({left:"-80px"}, 800, function() {    $(this).css('z-index', parseInt($(this).css('z-index')) + 1);    }).animate({left:"0px"}, 800);    }else{    $(this).animate({left:"0px"}, 600, function() {    $(this).css('z-index', parseInt($(this).css('z-index')) + 1);    });    }    });    return false;    }    $('#box').click(function() {    slide();    });    });

在线效果DEMO

http://www.jqueryba.com/475.html