目次
はじめに
スライドショーは複数の画像などを切り替える機能ですが、簡易的なものであれば素のJavaScript（Vanilla JS）でも作ることはできます。
素のJSで実装することでプログラミングの練習になりますし、 jQueryなどのライブラリや他のフレームワーク使用するときに役立つと思います。
HTML/CSSの準備
まずはスライドショーで使う画像を表示するHTML/CSSを準備します。
この記事では次のようなコードを前提とします。
10-12行目で読み込んでいる3枚の画像を読み込んでいますが、これらの画像の表示をJSで切り替えるようにしていきます。
cssで画像の表示サイズの調整を行なっています。
HTML
index.html
CSS
style.css
imagesフォルダ内に任意の画像を保存して、index.htmlをブラウザ開いてみましょう。
次のように画像が並んで表示されるはずです。
スライドショーの実装
次にJavaScriptでスライショーの機能を実装していきましょう。
前準備としてJavaScript用のscript.jsを作成して、index.htmlから読み込むようにします。
index.htmlの7行目に追記しました。
要素の取得
まずはJavaScriptの「querySelectorAll」メソッドで対象となる要素を取得します。
CSSのセレクタと同じ考え方で次のように書けますね。
const images = document.querySelectorAll(‘.slideshow-container img’)
ブラウザの開発者ツールでコードを実行すると、確かに要素を取得できています。
要素の表示切り替え
JavaScriptで要素のスタイルを変更して表示・非表示を切り替えることができます。
例えば1番目の画像のスタイルを変更したいときには、次のように書けます。
表示：
images[0].style.display = ‘block’
非表示：
images[0].style.display = ‘none’
これらを使って画像の表示を順番に変更していく関数を実装します。
関数の実装
script.jsの実装例です。
2行目からが画像の表示切り替えを行う関数tickerの定義になります。
4-6行目でいったん全ての画像を非表示にして、12行目で表示対象の画像のみスタイルを変更しています。
変数indexを10行目でインクリメントすることで、表示する画像を変えていきます。
15行目のsetTimeoutにより、tickerの処理は5秒(5000ms)ごとに実行されます。
最初のticker関数の呼び出しは19行目にあります。
addEventListener内から呼び出していることに注意してください。
要素の読み込みが完了する前にtickerを実行すると、7行目で要素の取得を行うことができません。
サンプルコードではJavaScriptのアロー関数を使っています。
アロー関数については以前の記事で紹介しています。
これで実装が完了したので、ブラウザで動作を確認してみましょう。
まとめ
今回は素のJavaScriptで簡易的なスライドショーを実装してみました。
小規模なコードですが、プログラミングの練習にはなると思います。
コメントを残す