<p>
  <button id="img-prev">戻る</button>
  <button id="img-next">次へ</button>
</p>
    <div class="photo"><img src="../../../../resources/kaminari-mon.png" alt="東京駅" /></div>
    <div class="photo"><img src="../../../../resources/photo1.jpg" alt="東京ドーム" /></div>
    <div class="photo"><img src="../../../../resources/photo2.jpg" alt="恐竜型ロボット" /></div>

function switchPhoto(speed,current,prevnext) {
  current.slideToggle(speed,function() {
    prevnext.slideToggle(speed);
  } );
}

$(document).ready(function() {
     var photo=$('div.photo');

$('button#img-prev').click(function(ev) {
         var current=photo.filter(':visible');
         var prev=$(current).prev('.photo');
         if(prev.size() < 1)prev=photo.filter(':last');
         switchPhoto('fast', current , prev ); 
} );

$('button#img-next').click(function(ev) {
         var current=photo.filter(':visible');
         var next=$(current).next('.photo');
         if(next.size() < 1) next=photo.filter(':first');
         switchPhoto('fast',current,next); 
} );

photo.eq(0).nextAll().hide();     //スタート時（アクセス直後）先頭以外の画像は非表示
} );