はとむぎ

独学でプログラミングを勉強中、現在(2019年8月)はＰＨＰを勉強しています。ＷＥＢサイト制作(WordPress対応)をとりあえずの目標としております！！それとゲーム実況もやっております！見ていて楽しいと思ってもらえる放送をしたいと日々試行錯誤しております。

はとむぎのカテゴリー

H&Rブログ > JavaScript > スライド > インデックスボタンを自動で追加しよう！

インデックスボタンを自動で追加しよう！

JavaScript

2020/8/8 2020/8/19

どうもこんにちは、Ryokutyaです。
今回は、前回の記事の続きになります。
前回の記事を読んでいただいていることを前提に話が進んでいきますので、もしよければ前回の記事も読んでいただければ幸いです。

今回やること

前回の記事で作ったパターン1のスライドですが、画像を追加する（削除する）と画像切り替えに使っているボタンの追加（削除）をしないといけません。
それは面倒ですし、変更忘れが起こる可能性があります。
ですので、今回は画像の数が変動したら自動でボタンの数も変動するように変更していきましょう！

コードの紹介

まずはコードを紹介します。
いちいち説明を見るのが面倒臭い人はコピペして使ってください。

html

<section class="carousel_1">
      <div class="carousel_h">
        <h1>Carousel 1</h1>
      </div>
      <div class="slider_wrapper">
        <p class="slider_title">carousel 基礎（スタンダード）</p>
        <div class="slides_container">

        <!--画像が入っているファイル名、画像名は適宜変更してください-->
          <ul class="slides">
            <li class="slide active"><img src="./img/1.png" alt=""></li>
            <li class="slide"><img src="./img/2.png" alt=""></li>
            <li class="slide"><img src="./img/3.png" alt=""></li>
            <li class="slide"><img src="./img/4.png" alt=""></li>
            <li class="slide"><img src="./img/5.png" alt=""></li>
            <li class="slide"><img src="./img/5.png" alt=""></li>
            <li class="slide"><img src="./img/5.png" alt=""></li>
          </ul>

        </div>
        <div class="index_btn_wrapper">
          <ul id="index_btn_cover">
          <!-- ここに作成されたボタンが収納されます -->
          </ul>
        </div>
      </div>
    </section>

css

.carousel_1 {
  background-color: #666d6e;
  padding-top: 20px;
  padding-bottom: 20px;
}

.slider_title {
  font-size: 32px;
  text-align: center;
}

.slides_container {
  padding: 0 50px;
}

.slides_container .slides {
  text-align: center;
  max-width: 800px;//画面サイズに合わせて変更する
  margin: 0 auto;
  list-style: none;
  padding-left: 0;//ulに最初から付いているpaddingを消している
  position: relative;
}

.slides_container .slides img {
//sizeが異なる画像を入れる場合、imgのサイズを任意で変更してslideのsizeを合わせることができる。
//画像の縦横比は変わる。
  width: 100%;
  height: 500px;
}

.index_btn {
  background-color: red;
  color: #fff;
  text-align: center;
  width: 40px;
  height: 40px;
  line-height: 40px;
  display: inline-block;
  margin-right: 10px;
  font-size: 20px;
  cursor: pointer;
}

//ボタンの位置調整
.index_btn_wrapper {
  padding-top: 40px;
  text-align: center;
}


//slideのon,off
.slide {
  display: none;
}

.active {
  display: block;
}

JavaScript（JavaScript+jQuery）

//=================================================//
//indx_btnの作成
//=================================================//

let slideLength=$('.slide').length;
for(i=0; i<slideLength; i++){
    let indexBtn=document.createElement('li');
    indexBtn.id="index-btn"+i;
    indexBtn.className="index-btn";
    indexBtn.textContent=i+1;
    document.getElementById('index_btn_cover').insertBefore(indexBtn,null);
}

コードの説明

それではコードの説明（主にJavaScriput,jQuery）をしていきます。

let slideLength=$('.slide').length;
for(i=0; i<slideLength; i++){
    let indexBtn=document.createElement('li');
    indexBtn.id="index-btn"+i;
    indexBtn.className="index-btn";
    indexBtn.textContent=i+1;
    document.getElementById('index_btn_cover').insertBefore(indexBtn,null);
}

この部分のコードが「index_btnの作成」部分です。
このコードはhtmlのul class=”slides”の子要素にliとして画像を追加したとき、自動でボタンを追加するためのコードです。
実際にどうなるか動画で確認してみてください。
（※動画を全画面表示にしていただけると見やすいかと思います。）

1.slide（画像）の画像を取得する

htmlで画像が入っている<li>のクラス名をslideとしています。

let slideLength=$('.slide').length;

対象要素.lengthとすることで対象の数を取得できます。
今回で言えばクラス名がslideの要素の数を取得できます。
取得できた要素の数をslideLength（変数）に格納しています。

2.JavaScriptで新たに要素（ボタン）を生成する


    let indexBtn=document.createElement('li');
    indexBtn.id="index_btn"+i;
    indexBtn.className="index_btn";
    indexBtn.textContent=i+1;
    document.getElementById('index_btn_cover').insertBefore(indexBtn,null);

document.createElement(‘htmlの要素’)とすることでhtml内に新たな要素を生成することができます。
※今回は’li’としているのでhtmlの<li>が生成されます。<div>を生成したいときは’div’としてください。
これだけでは生成されるだけでhtmlのどこにも配置されているため実際には何の変化もないので注意してください。

次に新たに生成した要素にid名とclass名をつけています。（上記の2行目と3行目のコード）
id名を変更したいときは対象要素.id=変更したいid名で変更することができます。
クラス名を変更したいときは対象要素.className＝変更したいクラス名とすることでクラス名を変更できます。
対象要素.classではないことに注意してください。

4行目のコードでボタンに表示される文字を編集しています。
対象要素.textContent=編集内容とすることで、要素の内容を編集できます。
※<li>〇〇</li>の○○部分を編集しています。

5行目のコードで生成した要素をhtmlのどこに配置するかを指定しています。
入れたい場所の親要素.insertBefore(入れたい要素,入れたい場所の要素)とすることで「入れたい場所の要素」の直後に「入れたい要素を追加」することだができます。

入れたい場所の親要素.insertBefore(入れたい要素,null)とすることで「入れたい場所の親要素」の「最後の子要素」として追加されます。

3.for文で繰り返す

for(i=0; i<slideLength; i++){
    let indexBtn=document.createElement('li');
    indexBtn.id="index-btn"+i;
    indexBtn.className="index-btn";
    indexBtn.textContent=i+1;
    document.getElementById('index_btn_cover').insertBefore(indexBtn,null);
}

2で説明し動作はこのままでは1回しか動作しないのでfor文を使って繰り返します。
条件式はi<slideLengthとすることで、画像の枚数と同じ数だけ繰り返し処理を行ってくれます。
slideLengthは画像の数が変わると変動すためいちいちコードを書き換える必要もありません。

idの名前を変更したところ（3行目）で”id名”+iとしているのは、id名はhtmlで固有のものなので（重複して同じid名をつけることができない）文字の連結（+）をしようして繰り返すごとに異なる名前が付くようにしてあります。

textContentで<li>の内容を編集している部分（5行目）も繰り返すごとに変わるようにしています。
これは、新しく生成されるボタンの番号が毎回同じでは問題があるためです。
もしもボタンに番号がいらない場合は、