JavaScript、画像切り替えをループさせる。

〽️ ユーザに親切な切り替えを実装。






syntax。


「「1parent」」.appendChild(「「1parent」」.children[0]); 「「1parent」」.insertBefore(「「1parent」」.children[「「1parent」」.length-1],「「1parent」」.children[0]);


すぐに先頭に戻りたい!

こんにちは、「ふ」です。
⬆︎のような、「 < 」「 > 」ボタンをクリックすると要素の表示が切り替わっていくUI。商品紹介ページなどでよく見かけます。

ここでは「A〜D」4枚の画像が切り替わる、とします。

ユーザが順に画像を閲覧し、「D」のところまで来ました。
ここで「進むボタン >」は押せなくなり、再び「A」を見たいときには、「< 戻るボタン」を3回クリックする必要があります。

〜これはちょっと不親切。

できれば「D」のところで「進むボタン」を押すと次に「A」が表示されるような、画像切り替えをエンドレスにループさせておきたい。「戻るボタン」のときもしかり、です。

〜今回はJavaScriptを使ってこの「切り替えループ」を実装する方法を紹介します。
仕組みはすごく単純なもので出来てしまいました。

仕組み。


その方法ですが、

ボタンクリックで、要素の順番を入れ替えてしまう。

というものです。

それには「appendChild」と「insertBefore」、2つのメソッドを利用します。
冒頭にも使った「A」「B」「C」「D」、4つの要素を例にとりましょう。

appendChild( )。


親要素.「「1appendChild(」」子要素「「1)」」;

「進む方向」への切り替えはappendChildを使いましょう。

JavaScriptのappendChild( )は、親要素に子要素を追加するためのメソッドです。
指定された要素は、元から含まれている子要素の最後尾に追加されます。

appendChildは通常、「外部の要素を追加する」といった用途が多いのですが、 すでに親要素に含まれている要素に対しても、使用することができます。

そしてここがポイント。 指定された内部要素は複製されて追加されるのではなく、そのまま移動する形を取ります。言い換えれば、「一旦削除されて最後尾に追加される」。

もし現在先頭にある「A」をappendChildの要素に指定すると、「A→B→C→D」が「B→C→D→A」となり、順序がキャタピラします。
要素の順序が変わったので当然、web上での表示順も変化します。

ここでもし。
先頭要素だけを表示するようにした場合、 表示上は「A→Bに進んだ」ように見せることができます。

insertBefore( )。


親要素.「「1insertBefore(」」追加する要素,挿入先の直後の要素「「1)」」;

「もどる」方向はinsertBefore。

insertBefore( )は、「追加したい子要素」を「指定した子要素の直前」に挿入するためのメソッドです。
「挿入先の直後の要素」に先頭要素を指定すると、追加要素が先頭に来ます。

insertBeforeについても、元から含まれている要素を「追加する要素」に指定できます。
するとappendChildのときと同じく、その要素が複製されてインサートされるわけではなく「移動」します。


ここで「追加したい要素」を最後尾の子要素「D」とし、「挿入先の直後の要素」を先頭の「A」としたバヤイ。

要素の順番は「A→B→C→D」が「D→A→B→C」となり、逆キャタピラ現象がおきます。

先頭要素だけを表示するようにすると。
表示上は「A→Dに戻った」ように見せることができます。

この2つのメソッドを利用して、実装していきましょう。

実装。


お待たせしました。実装例を示していきます。

「「3<!-- 画像領域 -->」」 <div id = "images"> bb<img src = "a.svg"> bb<img src = "b.svg"> bb<img src = "c.svg"> bb<img src = "d.svg"> </div> 「「3<!-- ボタン部分 -->」」 <div id = "buttons"> bb<button 「「5onclick = "modoru()"」」> ◀︎ </button> bb<button 「「5onclick = "susumu()"」」> ▶︎ </button> </div>

HTML。画像要素を並べる「#images」と、ボタン部分の「#buttons」を作りました。
2つのボタンにはonclick属性で、後ほど実装する関数「susumu」「modoru」を呼び出せるようにしています。


#images { display:flex; width:50%; margin:0 auto; 「「3/* 1つ目の要素以外は非表示にする */」」 「「1overflow:hidden;」」 border:solid 1px; } #images img { 「「3/* div領域にぴったり収める */」」 「「4min-width:80%; margin:10%;」」 } #buttons { display:flex; width:50%; margin:0 auto; justify-content:space-around; } #buttons button { display:block; padding:0.4em 1em; font-size:1.5em; }

CSSです。
1つの画像が、余白を含めて親要素いっぱいに収まるようにしています。そうすると残り3つがはみ出してしまうのですが、overflow : hiddenで非表示にしましょう。

その他のデザインはお好みのものにしてください。

ちなみに。imgのwidthは「min-width」としないと、Safariなどのブラウザではうまく表示されません。


現在の状態⬆︎です。
ここからJavaScriptを実装していきましょう。


「「3// 画像領域を取得」」 const images = document.getElementById("images"); 「「3// 「進む」関数」」 function susumu() { images.appendChild(images.children[0]); } 「「3// 「戻る」関数」」 function modoru() { images.insertBefore(images.children[images.children.length-1],images.children[0]); }

はじめに親要素「#images」を取得します。
そうしておけば、子要素にはimages.children[ index ]で簡単にアクセスすることが可能です。

前述のとおり、appendChild( )とinsertBefore( )メソッドを使って「進む」「戻る」関数を定義しました。


結果がこちら⬆︎。
実際にボタンを押すと、「A→B→C→D→A ....」と画像切り替えがループします。

お疲れさまでした!

やはりループすると便利。


最後までお読みくださり、ありがとうございます。

「ふ」は先日、サイトでとある商品を探していました。
何個かの紹介ページを見比べていたのですが、どのページにおいても商品画像の切り替えが「先頭から終点まで手動で切り替える」ものばかりで、「端までいったら先頭画像にループしてくれればいいのに!」と煩わしく感じていました。

そこで思い立ったのが今回の「ループ切り替え」でした。
実際に作ってみるとやはり便利です。簡単なJavaScriptで実現するので、ぜひ利用してみてください。

そして。今度は要素の切り替わり時に、アニメーションを施してみました。コチラ⬇︎の記事も合わせてご覧ください。

JavaScriptで表示切り替えアニメーション (エンドレス)。

2022.05.14
〽️ 端まで行ってもイライラさせない。


ではまた〜 ♪



JavaScript、乱数の範囲や重複を指定〜Math.random使い方。

2021.11.17
整数/範囲/重複の有無を自在にあやつろう。

JavaScriptコードの「?」をまとめたページはこちら⬆︎。











「ふ」です。

swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。