●2016/09/13：即時関数で囲んで、グローバル変数を消しました。
拡大と縮小画像が同じ画像のフェードのJavaScriptはこちら → サムネイル２Ｆ■フェード同一画像スライド・コメ付
上記のJavaScriptを改造しました。
コメントの付いたフェード切替のサムネイルのスライドのJavaScriptです。
小さなサムネイル画像をマウスオーバーすると、フェードイン、フェードアウトで拡大画像が変化します。
改造元と違うのは、
小さなサムネイル画像と拡大画像が、別画像である点です。
画像というのは、元々大きな画像を縮小表示しても、画像の重さは縮小しません。元の画像と同じ重さです。
だからサムネイルのように大量に重い画像を並べて表示すると、PCの読み込み速度が遅くなります。
そのために、サムネイル用の小さな画像を別に作成する方が、PCに負担がかからないのです。
原本は
イヌでもわかるJavaScript講座から。
マウスアウトでも画像が消えないように改造しました。
画像は全部が同サイズの画像を使用して下さい。バラバラのサイズでは使用できません。
マウスオーバーからクリックへの変更はできません。
画像やコメントの配置用に「#waku」を指定してますが、この「#waku」はJavaScriptとは無関係なので、削除してもかまいません。
「#Mini」「#Bs」「#Me」を並べるだけでもいいし、「#waku」の代わりに「テーブル（table）」等を利用してもいいです。
今回は「領域（ここでは#waku）を基準にして、画像やコメントを配置する
AllAboutを参考にしました。
即時関数のマウスオンの記述方法は、
Qiitaを参考にしました。
フェードが付かず、マウスオーバーとクリックの選択可のJavaScriptはこちら → サムネイル３■別画像スライドコメント付
■2016/09/14：画像先読み追加。