クリックするごとに表示する画像を切り替える
fadeIn()/fadeOut()版


実行例
東京駅
東京ドーム
恐竜型ロボット



変更前のhtml
 <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>

jQuery
$(document).ready(function() {
     var photo=$('div.photo');   //画像の表示領域(<div class="photo">)
     photo.click(function(ev) {  //画像の表示領域がクリックされたらイベント開始
         $(this).fadeOut('2000',function() {      
         var next=$(this).next();
         next=(next.size() > 0)?    //次の画像は
               next:photo.eq(0);   //次の兄弟要素が先頭の要素
   next.fadeIn('2000');                 //次の画像(非表示)
  } );
} );
photo.eq(0).nextAll().hide();     //スタート時(アクセス直後)先頭以外の画像は非表示
} );

クリックするごとに表示する画像を切り替える toggle()/hide()版もある。赤本p153参照。