<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>

$(document).ready(function() {
     var photo=$('div.photo');   //画像の表示領域、変数の宣言。photoは（<div class="photo">）と同じ
     photo.click(function(ev) {  //画像の表示領域がクリックされたらイベント開始
         $(this).toggle();       //クリックで表示中の画像を非表示にする。次の画像表示は下の処理にまかせる
         var next=$(this).next();   //jQueryオブジェクトのメソッドを使いたいときは$(this),つまりnextは.nextメソッドを使いますとう意味
         next=(next.size()>0)?    //次の画像が存在するときの処理.size()>0がそれ
               next:photo.eq(0);   //次の兄弟要素が先頭の要素
   next.toggle();                 //次の画像（非表示）
} );
photo.eq(0).nextAll().hide();     //スタート時（アクセス直後）先頭以外の画像は非表示
} );