●2016/01/20：即時関数で囲んで、グローバル変数を消しました。
最も簡単なスライドショーのJavaScriptです。前回掲載分より、さらにソースが短くなっています。
下記のように、画像指定の表記についてはいろいろな指定方法がありますが、同じ意味です。記述しやすい方に変更してもかまいません。
var ga=new Array();
ga[0]="a1.jpg";
ga[1]="a2.jpg";
ga[2]="a3.jpg";
ga[3]="a4.jpg";
ga[4]="a5.jpg";
↓↓↓ 上の記述方法を、簡略化したのが下の記述方法。最後の ) の前には , (カンマ)無し。うっかりカンマを入れると動作しません。
var ga=new Array("a1.jpg","a2.jpg","a3.jpg","a4.jpg","a5.jpg");
↓↓↓ さらに簡略化したのが下の記述方法。こちらも最後の ] の前には , (カンマ) 無し。今回は下記の記述を使用しました。
var ga=['a1.jpg','a2.jpg','a3.jpg','a4.jpg','a5.jpg'];
■2016/01/20：即時関数で囲んで、グローバル変数を消しました。
JavaScriptの変数には、グローバル変数とローカル変数があります。
たとえば複数のJavaScriptを同じページで動作させる時、同じグローバル変数を使用すると、変数が上書きされて、１個のJavaScriptしか動作しません。
そのため同じ場合は、片方のグローバル変数を書き直したりするわけですが、いちいちチェックするのは大変です。
そのため即時関数を使用して、即時関数でJavaScriptを囲むことで、グローバル変数をローカル変数に変更しています。
この「 ◆簡単スライドショー + Fフェード版」のコーナーの分については、全件修正済みです。
修正済みの分については、他のJavaScriptの邪魔をしたり邪魔をされたりせずに、動作すると思います。
もちろん同じグローバル変数以外にも、同じ id を使用すると、JavaScript は動作しません。
pngの透過画像で、GIFアニメのようにしてみました→
■簡単１-１■自動スライド GIFアニメっぽく■へ
画像順番がランダムに変化する →
■簡単１-２■自動スライド ランダムスライドショー■へ
画像本体のクリックでスライドする →
■面白１■画像クリックでスライド■へ
画像本体のマウスオンでスライドする →
■面白１-１■画像マウスオンでスライド■へ
CSSで３行追加して、画像の形を丸型に改造した →
■面白２■丸いスライドショー■へ
スライド画像を連番で作成した →
■面白１８■連番＋拡張子のスライド■へ
