スライドショーを作ったが、どうもよく分からない。
画像を徐々に表示・消去する設定がCSSなのだが、初めて扱うので理解できていない。
いろいろ調べて、上手く使えるようにがんばろう。

他の部分は、ごく普通のプログラムなので割合と簡単に作る事が出来た。
僕の考えた仕組みは・・・

htmlにスライドショー用の div を書き、その中に img タグで複数のスライド画像パスを書く。
そして、最後のimgタグにクラス名 class = "yuzSlide" を割り当てる。
これで画像のセットは終わり、簡単である。

JavaScriptコード内に画像パスを書く方式だと、操作ミスでコードを損なう恐れがある。
htmlに画像パスを書くなら、それほど危なくないと考えたのだ。

class="yuzSlide" を使う理由は、JavaScriptを無効にして表示した時の対応策。
このクラスにCSSで position: relative !important; を設定してある。
これでJavaScriptが無効な時に、画像がダダ並びで表示されるのを防げる。
ーーーーーーーーーー

プログラムの動作は次のようになっている。
htmlのスライドショー用 div に書かれたimgの画像パスを、プログラムで一つずつ拾い出す。
拾い出した画像パスを配列に格納し、その後で当該imgタグエレメントを削除する。
最後は、スライドショー用 div の中は空っぽになる。

次に、空になったスライドショー用 div 内に、新たな img エレメントを二つ作る。
この二つの img に、初めに拾った画像パスを順次入れる。

その後二つの img に表示・非表示のクラス名を与えて、CSSでフェードイン・アウトをさせる。
フェードアウトした img には、配列に格納した次の画像パスをセットして、クラス名を表示に変更する。

この画像とクラス名の入れ替えを無限に繰り返す・・・
ーーーーーーーーーー

いろいろ考えて、なかなか解決しなかったところがある。
フェードイン・アウトはもちろん論外なのだが・・・

【注 1 ーーー
スライドのimgにstyleの!importantを強制してあり、後からJabvaScriptで再設定を試みたがダメだった。
いや、結果はなんとかなったのだが、それまでが大変であった
.style.cssText = "position: relative !important;"
幾つかの方法を試して、やっと上記の方法で上手く動作した。
これ、あたり前のやり方だったのだろうか？
ともかく、なんとかなったので後日のために書いておく。
.style.position = "absolute" とか、普通にいけそうだと思ったのだがダメだった。ーーー】

他にはループの事がある。
どうやって繰り返しをしたら良いのか・・・
これはsetTimeoutでなんとかなった。
まぁ、とりあえず試験運用で動かしているのだが。

追記：2016/01/11
【注 1】の事について、勘違いをして余計な事をしていた。
スタイル設定方法は.style.cssTextにすると良いというのは本当の事で、それだけは収穫だった。
だが、その前にすっかり混乱してしまい、何故かrelativeが必要だと思い込んでしまった。
どう考えても変だとは思っていたが・・・

混乱の原因はいろいろあるが、スライドショーを表示する部分の親エレメントにスライド画像と同じ背景を設定してあった事に気付かなかった。
これは以前に使っていたスライドショーを設置する時に、試験的に背景に使っていたもの。
それをすっかり忘れていたので、なんでこの一つの画像だけが定位置になり他の画像が？？？
こういった現象に悩まされ、訳が分からなくなっていた。

スライドショーのコードを別に作ってテストして、上手く動いたのでブログに実装したのに。
いざブログでは思い通りにならない、とか・・・
まぁ、いろいろあったわけで。

どうもCSSが絡むと苦手意識があるためか、疑心暗鬼になって余計な事をしてしまう。
たっく、とんだ回り道をしてしまった。