类似QQ管家页面jquery图片显隐轮换效果-优快云博客

本文链接：https://blog.youkuaiyun.com/starkwen/article/details/84241644

原文引用http://www.oschina.net/code/snippet_268286_11424
 
01
 $(document).ready(function() { 
 
 02 var z = 0; 
 
 03 var inAnimation = false; 
 
 04 $('#box img').each(function() { 
 
 05z++;
 
 06 $(this).css('z-index', z); 
 
 07});
 
 08 function slide() { 
 
 09 if(inAnimation) return false; 
 
 10 else inAnimation = true; 
 
 11 var MaxZindex = z; SecondZindex = z-1; 
 
 12 $('#box img').each(function() { 
 
 13 if($(this).css('z-index') == MaxZindex) { 
 
 14 $(this).animate({left:"350px"}, 800, function() { 
 
 15 $(this).css('z-index', 1) 
 
 16 .animate({left:"0px"}, 800, function() { 
 
 17 inAnimation = false; 
 
 18});
 
 19});
 
 20 } else if($(this).css('z-index') == SecondZindex) { 
 
 21 $(this).animate({left:"-80px"}, 800, function() { 
 
 22 $(this).css('z-index', parseInt($(this).css('z-index')) + 1); 
 
 23 }).animate({left:"0px"}, 800); 
 
 24 }else{ 
 
 25 $(this).animate({left:"0px"}, 600, function() { 
 
 26 $(this).css('z-index', parseInt($(this).css('z-index')) + 1); 
 
 27});
 
 28}
 
 29});
 
 30 return false; 
 
 31}
 
 32 $('#box').click(function() { 
 
 33slide();
 
 34});
 
 35});