menu

はとむぎ

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

H&Rブログ > JavaScript > スライド > 表示中の画像に対応するインデックスボタンの色を変えよう!

表示中の画像に対応するインデックスボタンの色を変えよう!

JavaScript




どうもRyokutyaです。
今回はスライド(パターン1)の付属機能の最終回です。
よかったら見ていってください。

目次

今回やること

現在表示されている画像に対応したインデックスボタンの色を変更します。
こうすることで見ている人が現在何枚目のスライドを見ているのかがわかりやすくなります。

コードの紹介


html

<section class="carousel">
  <div class="carousel_h">
    <h1>Carousel 1</h1>
  </div>
  <div class="slider_wrapper">
    <p class="slider_title">carousel  スライド移動</p>

    <div class="slides_container">
      <div class="slides_inner">
        <ul class="slides" id="slide_case">
          <li class="slide"><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>
        </ul>
      </div>
    </div>

    <!-- prev,next_btn -->
    <div class="prev_btn"></div>
    <div class="next_btn"></div>

    <div class="index_btn_wrapper">
      <ul id="index_btn_cover" class="">
      </ul>
    </div>
  </div>
</section>


css

.carousel {
  padding-top: 20px;
  padding-bottom: 20px;
}

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

.slides_container {
  padding: 0 50px;
  position: relative;
}

.slides_container .slides_inner {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  white-space: nowrap;
  letter-spacing: -0.4em;
  overflow: hidden;
}

.slides_container .slides {
  list-style: none;
  transition: transform 2s ease 0s;
  padding-left: 0;
}

.slides_container .slides img {
  width: 100%;
  height: 500px;
}

.slide {
  display: inline-block;
}

.prev_btn {
  border-left: 3px solid #000;
  border-bottom: 3px solid #000;
  width: 30px;
  height: 30px;
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  left: 100px;
  cursor: pointer;
}

.next_btn {
  border-right: 3px solid #000;
  border-bottom: 3px solid #000;
  width: 30px;
  height: 30px;
  transform: rotate(-45deg);
  position: absolute;
  top: 50%;
  right: 100px;
  cursor: pointer;
}

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

//new
.active {
  background-color: blue;
}

.index_btn_wrapper {
  padding-top: 40px;
  text-align: center;
}


Javascript+jQuery

let slideList=$('.slide');
    let slideLength=slideList.length;
    let index=0;

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

    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の色変えの制御  new
    //=================================================//
    $('.index_btn').eq(0).addClass('active');//1つめのボタンにactive(クラス)を付与
    function activeMethod(){
        $('.index_btn').eq(index).addClass('active');
        $('.index_btn').not( $('.index_btn').eq(index) ).removeClass('active');
    }
    

  
    //=================================================//
    //inddex_btnを押した時の制御 new
    //=================================================//

    //スライドしながら移動
    $('.index_btn').click(function(){
        //index()は使用するときindex($())となることに注意
        index=$('.index_btn').index($(this));
        $('.slides').css('transform','translate('+(index*-100)+'%)');
        activeMethod();
    });

    
    //=================================================//
    //next_btnを押した時の制御 new
    //=================================================//

    function nextSlide(){
        index+=1;
        if(index < slideLength){
            $('.slides').css('transform','translate('+(index*-100)+'%)');
            activeMethod();
        }else{
            index=0;
            $('.slides').css('transform','translate(0)');
            activeMethod();
           
        }
    }
    
    $('.next_btn').click(function(){
       nextSlide();
    });

    //=================================================//
    //prev_btnを押した時の制御 new
    //=================================================//

    function prevSlide(){
        index-=1;
        if(index === -1){
            index=slideLength-1;
            $('.slides').css('transform','translate('+(index*-100)+'%)');
            activeMethod();
        }else{
            $('.slides').css('transform','translate('+(index*-100)+'%)');
            activeMethod();
        }
    }

    $('.prev_btn').click(function(){
       prevSlide();
    });
    
    //=================================================//
    //画像をクリックした時の制御
    //=================================================//

    $('.slide').click(function(e){
       let clickPoint=e.offsetX;
       console.log(e);
       let slideWidth=$('.slide').width();
       let clickWidth=1/6;//スライドのクリックできる幅

       if( clickPoint<slideWidth*clickWidth ){
           prevSlide();
       }

       if( slideWidth-(slideWidth*clickWidth)<clickPoint && clickPoint<slideWidth ){
           nextSlide();
        }
     });

コードの説明

①特定のクラス名に違う色を設定する
②1枚目の画像にクラスを付与する
③関数を利用する
④画像が切り替わった時、対応するインデックスボタンにクラスを付与する
⑤現在表示されている画像以外のインデックスボタンからクラスを削除する
この5つで色変えを制御しています。

特定のクラス名に違う色を設定する

css

.active{
    background-color: blue;
}

今回の色変えはあらかじめcssで特定のクラス名(今回はactive)に違う色を設定しておき、クラスが付与されると色が変わり、クラスが削除されると元の色に戻るという方法をとっています。
初めのインデックスボタンの色を赤色にしており、activeクラスが付与されると青色になるように設定しています。
色の変更をしたい場合はこの部分を変更してください。

一枚目の画像にクラスを付与する

JavaScript+jQuery

//=================================================//
//index_btnの色変えの制御
//=================================================//
    $('.index_btn').eq(0).addClass('active');//1つめのボタンにactive(クラス)を付与
    function activeMethod(){
        $('.index_btn').eq(index).addClass('active');
        $('.index_btn').not( $('.index_btn').eq(index) ).removeClass('active');
    }

ページが読み込まれた時、1枚目の画像が表示されているため、一番最初のインデックスボタンのdivにactiveクラスをつけておきたいのですが、インデックスボタンがJavaScriptで自動で作成されるようにしているため、html上ではないのでクラスをつけることができません。
そのため1行目の文でJavaScriptでインデックスボタンの1つ目にactive(クラス名)を付与しています。
activeが付与されることで、あらかじめ設定していたcssが有効になりインデックスボタンの色が変わります。
こうすることで、ページが読み込まれた時、一つ目のインデックスボタンが青色になっています。

関数を利用する

2行目以降はスライドが動いた時の処理を記述していますが、スライドが動く処理が行われた時毎回この処理を書く必要があります。
今回のスライドで言えば、「インデックスボタンが押された時」、「1つ進むボタン、1つ戻るボタンが押された時」、「画像の右側、左側が押された時」にこの記述を書く必要があります。
何回も書いていますが、変更が生じたときに変更箇所が多いとミスの原因になりますので、何か所も同じ記述が出てくるときは関数や変数に格納するようにしてください。
今回もactiveMethod()という関数を定義しその中に処理を格納しています。
そして、スライドが動く処理が記述されている部分で必ずactiveMethodを呼び出しています。
これで、スライドが動いた時、スライドに対応するインデックスボタンの色が変わるようになります。
それではactiveMethodの中身を説明していきます。

画像が切り替わった時、対応するインデックスボタンにクラスを付与する

$('.index_btn').eq(index).addClass('active');

関数内の1行目の部分で対応するインデックスボタンにactiveクラスを付与しています。
今までの記事でも説明しましたが、パターン1スライドはindex(変数)の値でスライドの切り替えを制御しています。
index(変数)の値と何枚目の画像かは連動しています。(1枚目の画像が表示されているときは、index(変数)の値は0のように連動しています)
これを利用してインデックスボタンにクラス(active)を付与していきます。
対象要素.eq(インデックス番号)とすることで、対象要素を取得できます。
画像が切り替わった時、eq(index)のindex値が変更されることによって画像と連動してインデックスボタンの色が変更されます。

現在表示されている画像以外のインデックスボタンからクラスを削除する

先ほどの1文でクラスは付与できましたが、このままでは一度でも対応する画像が表示されたボタンは青色になり元の色に戻りません。(画像が切り替わっても青色から赤色に戻りません)そのため、対象の画像ではなくなったときにactiveクラスを削除する必要があります。

$('.index_btn').not( $('.index_btn').eq(index) ).removeClass('active');

この一文でactiveクラスの削除を行っています。
対象要素.not(指定した要素)とすることで指定した要素を除外することできます。
ですのでこの分の意味は、index_btnの中で「画像に対応するindex_btn」( $(‘.index_btn’).eq(index) の部分)を除いてactiveクラスを削除しなさい。という意味になります。
こうすることで、画像が切り替わった時不要な部分のactiveクラスを削除し、対応するインデックスボタンのみ色が変わるようになります。

おわりに

今回でパターン1に関するお話しは一旦おわりです。
いろいろな付属部分を紹介してきましたので是非ご自分でサイトを作成されるさいにご利用いただければと思います。
インデックスボタンのデザインや、1つ進むボタンのデザインを変更するなどでサイトにあったデザインになると思うで、いろいろいじってみてください。
もしわからない部分などがあれば、ご気軽にご連絡いただければ、時間に余裕があり、わかる範囲であればお答えします。
次回は、パターン2(自動で画像が動くスライド)を紹介していきます。
それでは今回は、このあたりで(^^)/




コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

緑茶

2019年からフリーランスを目指して独学でwebデザインの勉強をしてきました。 相方のはとむぎと一緒にゲーム実況やブログの運営などをしています。 今後も相方と一緒に色々なことに挑戦していきたいです。

緑茶のカテゴリー

はとむぎ

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

緑茶

2019年からフリーランスを目指して独学でwebデザインの勉強をしてきました。 相方のはとむぎと一緒にゲーム実況やブログの運営などをしています。 今後も相方と一緒に色々なことに挑戦していきたいです。

緑茶のカテゴリー

アーカイブ

はとむぎ

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

緑茶

2019年からフリーランスを目指して独学でwebデザインの勉強をしてきました。 相方のはとむぎと一緒にゲーム実況やブログの運営などをしています。 今後も相方と一緒に色々なことに挑戦していきたいです。

緑茶のカテゴリー

アーカイブ