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>

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-index最大的那个上移->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、所有代码如下