プログラミング学習記録

【jQuery】サンプル付き!シンプルでよく使われるスライドショーの作り方[解説とコード付き]

投稿日:

スポンサーリンク

【jQuery】サンプル付き!シンプルでよく使われるスライドショーの作り方[解説とコード付き]

「Run Pen」で開始(サイズは×0.5推奨)

See the Pen oRyeLV by mochio4552 (@mochio4552) on CodePen.0

CSSの.page1のbackground-imageの部分に画像ファイルの場所を指定することで、背景として画像を挿入できます。

スポンサーリンク

ソースコード(コピペ用)と解説

  • 部品としてコピペするのに便利です
  • 全てのコードは、上の表示結果を参照してください
  • fontawesomeのアイコンを使用しています
  • 別でCSSフォルダ、jsフォルダを作成する必要があります
  • jQueryの設定ファイルは各自でご用意ください

HTML

<div class="page1">
      <div class="wrapper">
        <div id="slide">
          <ul>
            <li><img width="700" height="400" src="dragon_sleep.png">
              <span>
                <p class="slide-text1">イラストや</p>
                <p class="slide-text2">俺は寝るぞ</p></span></li>
              
              <li><img width="700" height="400" src="dragon_good.png">
                <span>
                  <p class="slide-text1">イラストや</p>
                  <p class="slide-text2">覚悟があるならかかってきな</p></span></li>
                
                <li><img width="700" height="400" src="dragon_hane.png">
                  <span>
                    <p class="slide-text1">イラストや</p>
                    <p class="slide-text2">第二形態</p></span></li>
                  
                  <li><img width="700" height="400" src="dragon_kigurumi.png">
                    <span>
                      <p class="slide-text1">イラストや</p>
                      <p class="slide-text2">第三形態</p></span></li>
                    
                    <li><img width="700" height="400" src="dragon_kotatsu.png">
                      <span>
                        <p class="slide-text1">イラストや</p>
                        <p class="slide-text2">zzz</p></span></li>
                      
                    </ul>
                    <button id="nextbutton">
                      <i class="fas fa-chevron-right fa-1x"></i></button>
                      <button id="prevbutton">
                        <i class="fas fa-chevron-left fa-1x"></i></button>
                      </div>
                    </div>
    </div>

HTMLの書き方ざっくり解説

  • 大枠で囲む(.page1)
  • 画像の大きさを統一する(HTMLでね)
  • テキストはspanで囲む(divを使わない)
  • wrapの幅を基準にボタンの位置を決める
  • slideで全てのスライドが動く範囲を決める
    ⇒画像の大きさ×画像の数(CSSで設定)

 ここは特に難しい部分はないですね。次!

CSS

html{
background-image: url();
overflow:hidden;
}

.page1{
  background-size: cover;
}

.wrapper{
  width: 700px;
  margin: 0 auto;
}

#slide{
  position: relative;
  height: 400px;
  padding-top: 10px;
}

#slide ul{
  position: absolute;
  width: 3500px;
  display: flex;
}

#slide li{
  width: 700px;
  list-style-type: none;
  margin: 30px;
  height: 400px;
  border-radius: 20px;
  background:#000;
}

#slide li img{
  border-radius: 20px;
  background-color: #fff;
  opacity: 0.5;
}

#prevbutton{
  position: absolute;
  top:200px;
  left: 10px;
}

#nextbutton{
  position: absolute;
  top:200px;
  right: 10px;
}

#prevbutton,#nextbutton{
  background-color: #3e5faa;
  color: #fff;
  border-radius: 50%;
  border: solid 2px #fff;
  width: 55px;
  height: 55px;
}

#slide span{
  display: flex;
  background: #fff!important;
  display: none;
}

.slide-text1{
  background-color: skyblue;
  border-radius: 5px;
  color: white;
  width: 120px;
  height: 35px;
  font-weight: bold;
  font-size: 12px;
  text-align: center;
  margin: 15px 10px;
  padding-top: 7px;
}

.slide-text2{
  font-weight: bold;
  font-size: 20px;
  margin-top: 10px;
  margin-right: 5px;
  padding: 5px;
}

.slide-text2:hover{
  text-decoration:underline;
}

CSSの書き方ざっくり解説

  • overflow:hiddenでslideのはみ出た部分を隠す
  • background-size:coverで横幅一杯に背景画像を配置
  • 横並びはflexを使う
  • 画像は全て、真ん中に表示される以外のデザインに設定(薄暗く、テキストも非表示)
    ⇒jQueryで真ん中の画像にデザインを設定します(明るく、テキストも表示)
  • #slide li=スライドのサイズ(HTMLと同じ)
  • wrapperも幅を同じにすると、ボタンをいい感じに配置できる
  • #slide ul =スライドのサイズ×枚数

 本題は次からです!

jQuery

$(function(){
  // スクロールの方向 -1の時には左、1の時には右
  var dir = -1;

  // スクロールのインターバル(何秒ごとにスクロールさせるか。3000ミリ秒に設定)
  var interval = 3000;

  // スクロールのスピード(700ミリ秒に設定)
  var duration = 300;

  // タイマー用の変数
  var timer;

  // リストの順番を変更(4番,5番目を1番最初にする)
  $("#slide ul").prepend($("#slide li:last-child"));
  $("#slide ul").prepend($("#slide li:last-child"));

  // リストの位置を変更(画像2枚分ずらす)
  $("#slide ul").css("left", -1400);

  // 最初に表示されるスライドのデザインを変える
  $("#slide li:nth-last-child(3)").css("background","#fff");

  $("#slide li:nth-last-child(3) img").css("opacity","1");

  $("#slide li:nth-last-child(3) span").css("display","flex");

  // 3000ミリ秒(変数intervalの値)ごとにslideTimer関数を実行
  timer = setInterval(slideTimer, interval);

  // slideTimer()関数
  function slideTimer(){
    // スクロール方向の判断
    if(dir == -1){
      // 画像1枚分左へスクロール

      $("#slide ul").animate({"left" : "-=700"}, duration, function(){
        // リストの順番を変更
        $(this).append($("#slide li:first-child"));

        // リストの位置を変奥
        $(this).css("left", -1400);

        // 通常のCSSと同じデザインにする
        $("#slide li").not(":nth-last-child(3)").css("background","#000");

        $("#slide li img").not(":nth-last-child(3)").css("opacity","0.5");

        $("#slide li span").not(":nth-last-child(3)").css("display","none");

        // 真ん中のスライドのみデザインを変える
        $("#slide li:nth-last-child(3)").css("background","#fff");

        $("#slide li:nth-last-child(3) img").css("opacity","1");

        $("#slide li:nth-last-child(3) span").css("display","flex");

      });
    }else{
      // 画像1枚分右へスクロール
      $("#slide ul").animate({"left" : "+=700"}, duration, function(){
        // リストの順番を変更
        $(this).prepend($("#slide li:last-child"));

        // リストの位置を変奥
        $(this).css("left", -1400);

        // 通常のCSSと同じデザインにする
        $("#slide li").not(":nth-last-child(3)").css("background","#000");

        $("#slide li img").not(":nth-last-child(3)").css("opacity","0.5");

        $("#slide li span").not(":nth-last-child(3)").css("display","none");

        // 真ん中のスライドのみデザインを変える
        $("#slide li:nth-last-child(3)").css("background","#fff");

        $("#slide li:nth-last-child(3) img").css("opacity","1");

        $("#slide li:nth-last-child(3) span").css("display","flex");

        // 左方向へリセット
        dir = -1;
      });
    }
  }

  // 前へ戻るボタン
  $("#prevbutton").click(function(){
    // スクロール方向の切り替え(右)
    dir = 1;

    // タイマーを停止して再スタート
    clearInterval(timer);
    timer = setInterval(slideTimer, interval);

    // 初回の関数実行
    slideTimer();
  });

  // 次へ進むボタン
  $("#nextbutton").click(function(){
    // スクロール方向の切り替え(左)
    dir = -1;

    // タイマーを停止して再スタート
    clearInterval(timer);
    timer = setInterval(slideTimer, interval);

    // 初回の関数実行
    slideTimer();
  });
});

jQueryの書き方ざっくり解説

  • どのような動きをするかを紙に書いて、順番に確認すると納得できます
  • 今回は5枚のスライドの場合を想定しています(理屈は変わりません)
  • カスタマイズして理想通りの結果にならない場合は、数字を変えて理想通りに動かすことで解を見出せます
  • コードにあるメモを見れば、どの部分がどのような動きをするかわかります。
  • append=要素を一番後ろに追加
  • prepend=要素を一番前に追加
  • slide li:nth-last-child(3)で、5枚のスライドの中の真ん中を指定
  • not(":nth-last-child(3)")で、5枚のスライドの中の真ん中以外を指定
  • 常に、1 2 「3」 4 5 「」=表示部分 というような順序になっています
  • 例えば、1 「2」 3 4 5 だと、左ボタンを押しスライドが移動するときに、1の隣にスライドが無い状態で移動します。
    つまり、5が前に来ていない状態なので、白い部分が見えてしまいます。
    ですので、表示させるスライドの前には、今回の場合は常に2つ以上のスライドが必要です。
  • スライドを小さくしたりして横幅が余る場合は、さらにスライドの枚数が無いと不自然な感じになりますので、表示範囲を狭くするなどの対策をしましょう。
  • 今回は横いっぱいに表示させていますが、overflow:hidenで見えません。

-プログラミング学習記録

Copyright© katoooblog , 2020 All Rights Reserved Powered by STINGER.