これは面白い！jQueryで紙芝居のように画像をめくるJavaScript

使用方法

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  var z = 0; 
  var inAnimation = false; 
  
  $('#pictures img').each(function() { 
    z++; 
    $(this).css('z-index', z); 
  });

  function swapFirstLast(isFirst) {
    if(inAnimation) return false; 
    else inAnimation = true; 
    
    var processZindex, direction, newZindex, inDeCrease; 
    
    if(isFirst) { processZindex = z; direction = '-'; newZindex = 1; inDeCrease = 1; } 
    else { processZindex = 1; direction = ''; newZindex = z; inDeCrease = -1; } 
    
    $('#pictures img').each(function() { 
      if($(this).css('z-index') == processZindex) { 
        $(this).animate({ 'top' : direction + $(this).height() + 'px' }, 'slow', function() { 
          $(this).css('z-index', newZindex) 
            .animate({ 'top' : '0' }, 'slow', function() { 
              inAnimation = false; 
            });
        });
      } else { 
        $(this).animate({ 'top' : '0' }, 'slow', function() { 
          $(this).css('z-index', parseInt($(this).css('z-index')) + inDeCrease); 
        });
      }
    });
    return false;
  }
  $('#next a').click(function() {
    return swapFirstLast(true); 
  });
  $('#prev a').click(function() {
    return swapFirstLast(false);
  });
});
</script>

<div id="gallery">
   <div id="pictures">
       <img src="画像パス" />
       <img src="画像パス" />
   </div>
   <div id="prev">
       <a href="#previous">« 前</a>
   </div>
   <div id="next">
       <a href="#next">次 »</a>
   </div>
</div>

サンプル

« Previous Picture

Next Picture »