一晃端午節又過去了，又得開始新的工作累人啊。

這兩天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

轉載于:https://blog.51cto.com/jqueryba/908253

總結

以上是生活随笔為你收集整理的类似QQ管家页面jquery图片显隐轮换效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。