スライダーを作ってみよう

完成サンプル

使っているメソッド

.length; => 指定した要素個数を取得することができます。今回の場合は、画像の枚数を取得しています。
.attr(); => 指定した要素の属性を取得する。今回の場合は、クリックした要素のclass属性を取得しています。
.animate(); => 指定した要素をアニメーションさせる

　
html部分 
    <html>
    <head>
      <meta charset="UTF-8">
      <link rel="stylesheet" href="./css/style.css">
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    </head>

      <body>
         <div class="slider">
           <div class="slider-box">
             <div>
               <img src="./images/slider/slider01.png" alt="" width="450" height="250">
               <img src="./images/slider/slider02.png" alt="" width="450" height="250">
               <img src="./images/slider/slider03.png" alt="" width="450" height="250">
             </div>
           </div>
           <p class="next"> <img src="./images/slider/next.png" alt="" width="40" height="40"> </p>
           <p class="back"> <img src="./images/slider/back.png" alt="" width="40" height="40"> </p>
         </div>
       </body>
    </html>
css部分 
    .slider{
      width: 450px;
      margin: 0 auto;
      position: relative;
    }

    .slider-box{
      overflow: hidden;
    }

    .slider-box div{
      width: 1350px;
      position: relative;
    }
    .slider-box div img{
      float: left;
    }

    .slider .next,
    .slider .back{
      cursor: pointer;
      margin-top: -20px;
      opacity: .5;
      position: absolute;
    }

    .slider .next{
      top: 50%;
      right: -50px;
    }

    .slider .back{
      top: 50%;
      left: -50px;
    }


    .slider .next:hover,
    .slider .back:hover{
      opacity: 1;
    }

cssのポイント

一番大きいdivに見える範囲を設定します。
画像を囲っているdivにはすべての画像の幅分のwidthを設定してあげます。
こうすることで画像が横並びになります。


jQuery部分 
    $(function(){
      //画像の枚数を取得
      var imgLength = $(".slider-box div img").length;

      //スライダーを止めるためのフラグ
      var flag = 1;

      //次に進むボタンか戻るボタンが押された場合
      $(".slider .next , .slider .back").click(function(){
        //クリックされた要素のクラス属性を取得
        var attrClass = $(this).attr("class");

        //クラス名がnextの時
        if(attrClass == "next"){
          if(imgLength <= flag){
            return false;
          }

          $(".slider-box div").animate({
            left : "-=450px"
          },1000);
          flag++;

        //クラス名がnext以外の時(backの時)
        }else{
          if(flag <= 1){
            return false;
          }

          $(".slider-box div").animate({
            left : "+=450px"
          },1000);
         flag--;
        }
      });
    });

jquery部分を細かく見てみよう

    //次に進むボタンか戻るボタンが押された場合
    $(".slider .next , .slider .back").click(function(){
      ～省略
    });

$("セレクタ , セレクタ")

セレクタをカンマで区切ることで、複数指定することができます。
今回の場合だと、次に進むボタンか戻るボタンが押された場合に、clickイベントが処理されます。 

      $(".slider-box div").animate({
        left : "-=450px"
      },1000);
      flag++;

      $(".slider-box div").animate({
        left : "+=450px"
      },1000);
     flag--;

-=と+=

-=と+=は◯◯づつ足していくという意味の演算子です。
+= → 加算して代入
-= →　減算して代入
今回の場合だと、.nextを押されたら.slider-box divのleftに450px加算されて画像が動くという感じです。 

      $(".slider-box div").animate({
        left : "-=450px"
      },1000);
      flag++;

      $(".slider-box div").animate({
        left : "+=450px"
      },1000);
     flag--;

++と--

.nextとクリックされた場合の時の処理に「flag++;」という記述があります。
また、.backのときには「flag--;」という記述があります。
++ → 1加算する
-- → 1減算する
今回の場合だと、.nextを押される度にflagに数値が1づつ足され、.backが押される度にflagに数値が1づつ引かれています。 

      //画像の枚数を取得
      var imgLength = $(".slider-box div img").length;

      if(imgLength <= flag){
        return false;
      }

スライダーを止める処理

このスライダーを止める処理が大事なポイントとなります。この処理がないと、どこまでもスライドしていってしまいます。
変数imgLengthで画像の枚数を取得し(取得結果は3となります。)flagの数と比較します。
flagは、クリックされるごとに1増えたり、1減ったりする変数です。
もしもflagが画像の枚数を超えたら「return false;」で処理と止めます。 if文ってなんだっけ
return false;が読み込まれると、その下のプログラムは読まれず、処理をキャンセルすることができます。