jQuery实现多张图片上下叠加切换

1、先在div容器中加入一堆图片本帖中的图片都用http://placehold.it/300x250来代替<div id="gallery"> <div id="pictures"> <img src="http://placehold.it/300x250&text=Item1" alt="" /> <img src="http://placehold.it/300x250&text=Item2" alt="" /> <img src="http://placehold.it/300x250&text=Item3" alt="" /> <img src="http://placehold.it/300x250&text=Item4" alt="" /> <img src="http://placehold.it/300x250&text=Item5" alt="" /> </div></div>

2、为了实现杂乱的效果，对img添加如下css。本例用的是chrome浏览器，其它浏览器请自行更改前缀div img:nth-child(even) { -webkit-transform: rotate(10deg); margin-left:5px;}div img:nth-child(3n) { -webkit-transform: rotate(-15deg);}其结果如下图

3、对所有的img添加z-indexvar z = 0;$('#pictures img').each(function() { z++; $(this).css('z-index', z);});

4、新增点击图片事件$('#pictures').click(function() { return swapFirstLast();});

5、实现swapFirstLast首先，只让最上层的，也就是z-i艘绒庳焰ndex最大的那个上移->z-index制为最小->袖紫囫挡还原位置$(this).animate({ 'top' : '-' + $(this).height() + 'px' }, 'slow', function() { $(this).css('z-index', 1) .animate({ 'top' : '0' }, 'slow', function() { });});其它图片则把各自的z-index加1$(this).css('z-index', parseInt($(this).css('z-index')) +1 ) ;//完整代码function swapFirstLast() { $('#pictures img').each(function() { if($(this).css('z-index') == z) { $(this).animate({ 'top' : '-' + $(this).height() + 'px' }, 'slow', function() { $(this).css('z-index', 1) .animate({ 'top' : '0' }, 'slow', function() { }); }); } else { $(this).css('z-index', parseInt($(this).css('z-index')) +1 ) ; } }); return false; }

6、所有代码如下

7、css代码如下@charset "utf-8";*{margin:0;padding:0;list-style-type:none;}body{font:12px/180% "微软雅黑";background:#22384d;color:#555555;}#gallery{position:relative;width:460px;margin:40px auto 0 auto;}#pictures{position:relative;height:408px;}#pictures img{position:absolute;top:0;left:0;}