Jqueryでスライドショーをプラグインを使わずに作る場合は、まずは頭の中でどのようにすればスライドショーを作れるか考えることが大事だと思う。

ul,liタグで画像を並べておいてそれをCSSで同じ位置に持ってくる。それを表示したい画像だけ表示させて、他は隠しておく。順番に画像を表示させる。
ここで、問題になるのは一番最初と最後の要素をどうやって検出するかがだと思う。私の場合は、classタグにフラグを立てておく方法をとる。最初にきたら、一番最初へ戻るようにプログラムすればいい。表示の時は、フェードイン、フェードアウトにするかを決めておいたほうがいい。CSSで表示非表示にするとJqueryで制御しようとするとうまく動作しなくなってしまう。Javascript側で制御するかCSS側で制御するくらいは決めておいたほうがいい。

作ったものは、こちら。

今後のことを考えると、クラスファイル化をしたい。それとsetInterval()とclearInterval()をクラスファイルで定義すると動かなくなるのか考えたいと思った。
今回は、関数に置き換えて作っている。まだまだ経験不足である。

関連記事