○はじめに

難しそうですが案外簡単に使えますので、初心者の方向けにざっくり解説したいと思います。
詳細は私も解らないのでググってください。
今回はリロードする度にランダムで1枚画像が表示されるようにします。

※最初から解説すると長くなるのでJqueryの導入方法については飛ばします。

①任意のhtml・js・jquery・imgのファイルを用意します

thmlファイルのheadタグ内にjs・jqueryを記述して全て連動させます。
(必要であればcssも。今回は省きます。)

imgファイルの中には3枚以上img画像が入っているとわかりやすいです。
今回は、下の画像4枚でやってみます。

②htmlを記述します。

通常のimgと同じように記述しますが、scrタグの中は””(ダブルクォーテーション)だけつけて、
画像を入れずに空にしておきます。

<img id="img"  src="" alt="イラスト" />

!この時に『id』か『class』どちらでもいいので必ずつけておいてください（後で使います）!

③jsの外側のところを記述します。

最初に下の画像にあるように記入します。
この時に大切なのは「なんで？どうして？」などと考えないことです。
ここの部分は『決まり文句』なのでそのまま記述しましょう。

$(function(){});

④jsの内側のところ（{}の中身）を記述します。

下の画像のように打ち込みます。

var A = ['img/img01.gif',
         'img/img02.gif',
         'img/img03.gif',
         'img/img04.gif'
         ];

これは、『Aという名前の箱にimg01,02,02,04が収納されている』状態です。

その下にもうひとつコードを打ち込みます。

var B = A[Math.floor(Math.random()*A.length)];
	$('#img').attr('src',B);

ここは、
❶『Bという名前の箱のAの箱が入っている』
という状態から
⇩
❷『Aの箱の中からランダムに1枚画像を取り出す』
さらに
⇩
❸『取り出した画像を#img(指定のid)の『src』に記述する』
という意味になります。

なんか複雑な気がしますが『[』を打つと自動的に予測変換で出してくれるので、
下の画像の通りに打ちます。

！この時に箱の名前（A・Bの部分）とid(もしくはclass)を間違えると動きません。
注意してください！

③④合わせるとこんな感じになります。

$(function(){
	var A = ['img/img01.gif',
		 'img/img02.gif',
		 'img/img03.gif',
		 'img/img04.gif'
		];
});	

⑤ブラウザで動くか確認します。

ブラウザで開いてみて、何回かリロードしてみます。
画像が切り替われなければどっか間違ってます。コードを見直しましょう。

画像が切り替われば成功です。

以上で解説は終わりです。
案外なんとかなったのではないでしょうか？

ならなかった場合は、ここのコードをコピって、箱の名前とid名を変更して使いましょう。
めちゃ楽です！

本当は見本をつけたかったのですが、うまくいかなかったので諦めました！jqueryのプラグインでスライドとか使う時に組み合わせたりすると、
画像の並びがランダムになったり、色々な演出ができるので、機会があれば使ってみてください。