jQueryで自作スライドショー

tmb_jquery01

jQueryのスライドショーを作成してトップページに配置しました。作成するにあたって、プラグインに頼らず自力でjQueryのスライドショーを作る方法(はじめてのスライドショー作成編)を参考にさせていただきました。こちらの方法では画像3つを決め打ちで操作しているため、例えば画像が20個もあるとその都度ソースを書き換える必要があり大変です。なので最低限、画像枚数に左右されない作りにしようと思いました。

フォローするわけではないですが、参考にさせていただいたサイトは説明が非常にわかりやすく助かりました。初心者向けに理解しやすい作りになっているのだと思います。

スポンサーリンク

スライドショーの作り

私が参考にしたスライドショー作成のポイントとしては、
  • 画像をHTMLで配置し、CSSで重ねておく。
  • 順番に画像の表示、非表示をCSSで切り替える。
  • setIntervalで定時実行する。

です。私が考えた作りは、画像を1から順にループしてn番目表示→n−1番目非表示という処理をし、その処理を定時実行するということです。実際作成しました。ここではスライド関数としときます。あとはsetIntervalで繰り返し処理したのですが、結果的にはうまくいきませんでした。

ハマったこと

スライドショーが動くには動くのですが、最後の画像に切り替わったあとに最初の画像に切り替わらずに一旦空白になったり、それを調整しようとしたら1枚目と2枚目が同時に表示されたりと散々でした。

何が悪かったかというと、setIntervalの中のスライド関数で常に画像全部のループを回していたのです。なぜか勘違いして、setInterval1回目でスライド関数のループ1周目が動作すると思って作成していたのです。画像3枚でやってましたが、setInterval1回につき、常に3枚目の処理まで完了していました。正しくは、setInterval1回目で1枚目と2枚目の画像の表示非表示入れ替え、setInterval2回目で2枚目の画像と3枚目の画像表示非表示入れ替え・・・という流れにしなければダメでした。

気づけば当たり前のことですが、setInterval自体初めてでよく理解していませんでした。最初にちゃんと調べないといけませんね。結局、ループ処理1回1回でbreakして処理を終了するようにしてうまくいきました。

まとめ

失敗した方が記憶にも定着するし糧になるので、いい経験になったと思います。現時点では画像が勝手にスライドするだけなので、サムネイルを追加して、サムネイルクリックでも画像が表示できるように改良したいと思っています。

スポンサーリンク

この記事が気に入っていただけたらシェアお願いします。励みになります。
prev ポートフォリオサイト制作記part3 next CakePHP2.xで確認画面付き問い合わせフォーム作成

スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です