「「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つの要素を例にとりましょう。
親要素.「「1appendChild(」」子要素「「1)」」;
「進む方向」への切り替えはappendChildを使いましょう。
JavaScriptのappendChild( )は、親要素に子要素を追加するためのメソッドです。
指定された要素は、元から含まれている子要素の最後尾に追加されます。
appendChildは通常、「外部の要素を追加する」といった用途が多いのですが、 すでに親要素に含まれている要素に対しても、使用することができます。
そしてここがポイント。 指定された内部要素は複製されて追加されるのではなく、そのまま移動する形を取ります。言い換えれば、「一旦削除されて最後尾に追加される」。
もし現在先頭にある「A」をappendChildの要素に指定すると、「A→B→C→D」が「B→C→D→A」となり、順序がキャタピラします。
要素の順序が変わったので当然、web上での表示順も変化します。
ここでもし。
先頭要素だけを表示するようにした場合、
表示上は「A→Bに進んだ」ように見せることができます。
親要素.「「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、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。