JavaScriptでスライドショーみたいな画像切替え（jQueryなし）
先日、「Lumix GX7 mk2とCanon G5 XでISO感度比べ」の記事を書いた際、微妙な違いの写真って縦や横に並べただけじゃ比較しづらいよなぁ…と感じました。
どうせならスライドショーみたいにパッパッとその場で写真を切り替えて見せたほうがわかりやすいのではないか、と思ったのでさっそくJavaScriptで作ってみました。
もちろん、jQueryを使ったflexsliderとか、bxsliderを導入したほうが楽なのはわかっているのですが、最近はjQuery離れが流行っている（？）らしいので、自前でやってみようかなと。
HTMLソースの例
<ul class="slides">
<li><a href="[画像ファイル]"><img src="[画像ファイル]" /></a><p>ISO 200</p></li>
<li><a href="[画像ファイル]"><img src="[画像ファイル]" /></a><p>ISO 800</p></li>
<li><a href="[画像ファイル]"><img src="[画像ファイル]" /></a><p>ISO 1600</p></li>
<li><a href="[画像ファイル]"><img src="[画像ファイル]" /></a><p>ISO 25800</p></li>
</ul>解説
flexsliderを真似てul/liで画像を並べています。
画像だけだったらimgタグにクラス名を付けてダダダっと並べるだけでも良いのですが、どうせなら、画像の上に文字も重ねて表示したいじゃないですか。
そうするとimgタグの後ろにpタグなんかも欲しくなってきて、それをタグで囲むなら、わかりやすくul/liにしたほうが良いよな、という単純な考えです。
CSSの例
<style>
ul.slides li {
display:none;
position:relative;
list-style:none;
}
ul.slides li img {
width:600px;
}
ul.slides li p {
position:absolute;
top:1em;
left:1em;
color:white;
font-size:1.2em;
}
</style>解説
ポイントとしてはliタグを非表示にしている点と、ulタグのpositionをrelativeにして、後に続くpタグのpositionをabsoluteにすることによって、画像の上にpタグの中に書いた文字を重ねて表示させている点くらいでしょうか。
必要最低限しか書いていないので、かなりシンプルじゃないかなと自画自賛。
JavaScriptの例
<script>
//スライド用のliタグを全て取得
var slides = document.getElementsByClassName('slides')[0].getElementsByTagName('li');
//スライド表示用の関数を呼び出す（引数はスライドの切り替え時間）
viewSlide(2000);
function viewSlide(msec, slide_no = -1)
{
//現在のスライドを消す
if (slides[slide_no]) {
slides[slide_no].style.display = 'none';
}
//スライド番号をカウントアップ
slide_no++;
if (slides[slide_no]) {
//次のスライドを表示
slides[slide_no].style.display = 'block';
} else {
//次のスライドがなければ最初のスライドを表示
slides[0].style.display = 'block';
slide_no = 0;
}
setTimeout(function(){viewSlide(msec, slide_no);}, msec);
}
</script>解説
- クラス名slideの下にあるliタグをすべて取得
- viewSlide関数を実行
- viewSlide関数では現在のスライド(liタグ)を非表示にし、スライド番号をカウントアップした後、そのスライドを表示している
- スライド表示後は指定された秒数（ミリ秒）後に自分自身をもう一度実行するようにしている
といったけっこう単純な作りです。
getElementsByClassNameは指定したクラス名のオブジェクトを取得する関数ですし、getElementsByTagNameは指定したタグ名のオブジェクトを取得する関数なので説明不要と思いますし、うーん、ほかに解説するところあるかな。
setTimeoutに無名関数 funciton () { } という表記を使っているところが物珍しいと感じる人がいるかも？というくらいですか。
たぶん、setTimeout関数の解説って setTimeout(関数名, ミリ秒); みたいなのが多いですもんね。setTimeoutで呼び出される関数に引数を渡すために無名関数（function () {}）でラッピングしているだけのことです。
slide_noのオーバーフローチェック（最大数に達したら最初に戻るヤツ）はやっつけで書いた感があるので、もっと綺麗に書く方法もあるかも。ま、動けばいいよねｗ
実行結果
ISO 200
ISO 800
ISO 1600
ISO 25800
2秒ごとに写真が切り替わって表示されると思います。
まとめ
- 似たような写真を比較する場合、縦や横に並べるよりも、その場でパパッと切り替わったほうが違いを認識しやすいのではないかと思い、JavaScriptでスライドショーみたいなモノを作ってみた
- 正直、jQueryを使っているならflexsliderやbxsliderなどの有名どころのプラグインを入れるほうが導入は簡単
- ただ、jQueryが重い等の理由でjQuery離れを目指しているなら、シンプルなスライダーを自前で書くのも良いかも
といったところでしょうか。
jQueryをディスっているつもりはなく、あれは本当に素晴らしいモノで、クロスブラウザ対応を簡単にしてくれた功績はとてつもなく大きいです。
ただ、最近はIE11がバッサリ見捨てられることも多く、その他のモダンブラウザならほとんど同じJavaScriptコードで動作するためjQueryを使う理由が薄くなってきています。
個人的にはそっちが本来あるべき姿だよなぁとは思いますが、有用なプラグインもまだまだ多いので、はてさてこの先はどうなっていくのやら。
