【jquery】jqueryを使って画像クリックで画像切り替え

表示されている画像をクリックすると、違う画像に切り替わるようなサンプルを作ってみたいと思います。
ただ単に画像を切り替えるだけなので、味気ないですが・・・・。

htmlのサンプル

画像を表示したい場所に、imgタグを置いているだけです。。

jqueryのサンプル

//切り替える画像のファイルを配列で指定
var imageArr = 
 [
  'image1.jpg',
  'image2.jpg',
  'image3.jpg'
 ];

//表示する画像の配列の添え字
var now_image_count = 0;

$(document).ready(function(){
 //画像配列の1番目をセットする。
 $('#imageerea').attr('src', imageArr[now_image_count]);
 
 $('#imageerea').click(function(){
  
  if (now_image_count == imageArr.length - 1) {
   now_image_count = 0;
  } else {
   now_image_count++;
  }
  
  $('#imageerea').attr('src', imageArr[now_image_count]);
  
 });
 
});

//切り替える画像のファイルを配列で指定
var imageArr = 
 [
 'image1.jpg',
  'image2.jpg',
  'image3.jpg'
 ];

imageArrに切り替えさせたい画像のファイルパスとファイル名を記載しています。

//表示する画像の配列の添え字
var now_image_count = 0;

now_image_countは、表示する画像の添え字で、初期値は0で、画像が切り替わる毎に値が変わります。

$(document).ready(function(){
 //画像配列の1番目をセットする。
 $('#imageerea').attr('src', imageArr[now_image_count]);
 
 $('#imageerea').click(function(){
  
  if (now_image_count == imageArr.length - 1) {
   now_image_count = 0;
  } else {
   now_image_count++;
  }
  
  $('#imageerea').attr('src', imageArr[now_image_count]);
  
 });
 
});

readyイベントで、now_image_countの添え字にある画像を表示。
clickイベントで、now_image_countがimageArrのサイズと同じであれば最初に戻し、小さければ添え字を１プラスしています。

$('#imageerea').attr('src', imageArr[now_image_count]);

この部分で、imgタグのsrcを切り替えています。