【JavaScript】ホームページでアイコンをクリックすると掲載されている写真が動くコード

お世話になります。

HTML/CSS、JavaScriptを使い、ネットにあるホームページを見ながら作成練習をしております。

写真が4枚横に並んでおり、その下にクリックできるアイコンが4つあります。

一番左のアイコンをクリックすると、写真が4枚が横にスライドして一番左の写真がサイトの中央に移動する。
左から2番目のアイコンをクリックすると、写真4枚が横にスライドして左から2番目の写真がサイトの中央に移動する。
3番目、4番目同様。

という動きを処理する方法がわからずにおります。

初歩的な質問で大変恐縮ですが、ご教示いただければ幸いです。

【ソースコード】

html
1
2 <main class="topimage">
3   <img src="img/top1.jpeg">
4   <img src="img/top2.JPG">
5   <img src="img/top3.jpg">
6   <img src="img/top4.jpg">
7 </main>
8
9//画像4枚を掲載。
10
11 <section class="btn">
12   <div class="btn1"><a href=""><img src="img/btn.jpeg" id="egg_button1"></a></div>
13   <div class="btn2"><a href=""><img src="img/btn.jpeg" id="egg_button2"></a></div>
14   <div class="btn3"><a href=""><img src="img/btn.jpeg" id="egg_button3"></a></div>
15   <div class="btn4"><a href=""><img src="img/btn.jpeg" id="egg_button4"></a></div>
16 </section>
17
18//アイコンを4つ表示。

css
1
2.topimage {
3  display: flex;
4  width: 50%;
5  height: 50%;
6}
7
8//画像4枚を横並びに掲載。
9
10.btn {
11  display: flex;
12  justify-content: center;
13  margin: 20px 10px 0px 0px;
14}
15
16//アイコン4つをその下に横並びに表示。

JavaScript
1
2'use strict';
3{
4  const btn = querySelector();
5  btn.addEventListener('click', () => {    
6
7  });
8}
9
10//HTMLにidは付けたのですが、この後JSでどのようにコードを書いたらいいのか理解が不足しております。

どうぞよろしくお願いいたします。

kuma_kuma_

2020/09/28 02:14

> HTML/CSS、JavaScriptを使い、ネットにあるホームページを見ながら作成練習をしております。まず練習課題にしているHPはJavaScriptだけでこの機能を実装していますか？(JQueryやプラグインの使用はしていませんか？) 最近こういう処理はプラグイン(追加機能)のファイルがあってそこに設定だけすればあとは自動で再現できるようになってたりします。

m.ts10806

2020/09/28 02:41

コードはマークダウンのcode機能を利用してご提示ください。

MM1

2020/09/28 03:07

kuma_kuma_様早速にありがとうございます。JQueryやプラグインは使用しておりません。 JavaScriptの基礎をDotinstallでまず勉強しましたが、実践的なイメージがつかめていないため、今回HP作成を通じてもう少しイメージできればと思いました。この後BootstrapやjQueryも勉強したいと思っておりますが、そちらを先に学んでからHP作成の練習を行うべきでしょうか？ご助言いただければ幸いです。

MM1

2020/09/28 03:08

m.ts10806様失礼しました。 markdownで編集いたしました。次回以降こちらを使うようにします。教えていただき、ありがとうございます。

kuma_kuma_

2020/09/28 03:16

意味が違って伝わっているようです。元となるHPはプラグインを使用してますか？使用しているなら模倣する際同じようにプラグインを使わないと再現は難しいですし使用していないならJavascriptでも構いません。もしかしたら元となるHPはCSSアニメーションかもしれませんよ？というお話です。その辺の事前調査はされたのですか？という意味です。

MM1

2020/09/28 04:20

kuma_kuma_様失礼しました。事前調査できておりませんでした。今https://whatwpthemeisthat.com/で確認したところ、Contact Form 7というプラグインを使用していると表示されました。

kuma_kuma_

2020/09/28 04:31

いいえ。誤解などはよくある話です。ただ「Contact Form 7」を使われて作成されているなら「Contact Form 7」を使って作成しないと全機能の模倣は難しいと思います。 (できなくもないですが一部「Contact Form 7」の機能の模倣までしないといけなくなる。) たとえばJQueryのUIを使うサイトとかなら一部機能をプラグインでまかなっているので模倣もしやすいのですが「Contact Form 7」の場合フルパッケージ(HPを作るところから)なので模倣には向かないと思います。

MM1

2020/09/28 04:42

kuma_kuma_様承知しました。Wordpressやプラグインを使用していないサイトを見つけ、もう一度練習に適したサイト選びをします。教えていただき、ありがとうございます。

dit.

2020/09/30 06:55

「Contact Form 7」はその名の通りコンタクトフォーム（お問い合わせフォーム）を作るためのWordPressのプラグインのはずなので、今回のスライダー的なものには関係が無いのではないかと思います。 https://ja.wordpress.org/plugins/contact-form-7/

MM1

2020/10/02 01:21

dit.様返信が遅れてしまいすみません。教えていただき、ありがとうございます。エンジニアの方が練習用に推薦するサイトを見つけてみましたので、まずはそちらで練習をしてみて理解を深めようと思っております。ありがとうございます。