JavaScript 備忘録 | メシのタネ

jQuery11
このエントリーをはてなブックマークに追加

【jQuery】スライダーを作る

 2014/09/17

いまさら誰も要らないし、機能も微妙ですけど、
練習がてら作ってみました。
何の機能もついてないスライダーなんですけど、
今まで作ったことが無いし作れるかどうかも分かんないので
とりあえず作ろうと思い作れるレベルで作りました。
作ったのはコチラです。
もしも使いたい人が居たらコードは好きに使ってくださって結構です。

HTMLを書く

こんな感じでHTMLを書きます。

<html>
     <body>
          <div id="mirakurusuraidaa">
               <div id="slideprev" style="color: #666;">
                    <i style="font-size: 7em; box-sizing: border-box;" class="fa fa-angle-left"></i>
               </div>
               <ul>
                    <li></li>
                    <li></li>
                    <li></li>
               </ul>
               <div id="slidenext" style="color: #666;">
                    <i style="font-size: 7em; box-sizing: border-box;" class="fa fa-angle-right"></i>
               </div>
          </div>
     </body>
</html>

ファイルを読み込む

headの中にファイルを読み込みます。


          <meta charset="UTF-8">
          <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

          <script src="slide.js"></script>
          <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">


初期値を設定する

jQueryとslide.jsの間に初期値を設定するjsを書きます。
awesomefontって奴を使ってるので、使いたくない人は、
<>のトコを画像にするなりなんなりしてください。


          <meta charset="UTF-8">
          <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
          <script>

          jQuery.center = 900; //真ん中の画像のサイズ
          jQuery.width = jQuery("html").width(); //画面の横幅
          jQuery.image = [ //画像のパス
                         "images/5.jpg",
                         "images/1.jpg", //ここに真ん中の画像
                         "images/2.jpg",
                         "images/3.jpg",
                         "images/4.jpg",
                    ];

          </script>

          <script src="slide.js"></script>
          <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">

調整用のスタイルシートを書く

矢印の場所とか調整していきます。



          <style>

               ul {
                    margin: 0;
                    padding: 0;
               }
               
               #mirakurusuraidaa > ul > li {
                    float: left;
                    background-repeat: no-repeat;
                    list-style: none;
                    position: absolute;
               }

               #slideprev {
                    position: absolute;
                    top: 105px;
                    right: 70%;
                    height: 40px;
                    width: 40px;
                    cursor: pointer;
                    z-index: 1222;
               }
               #slidenext {
                    position : absolute;
                    top: 105px;
                    left: 70%;
                    height: 40px;
                    width: 40px;
                    cursor: pointer;
                    z-index: 1222;
               }

          </style>


jQueryの中に入れたデータを取り出して変数に突っ込む

任意に設定された初期値を変数に突っ込んでいきます。



jQuery(function(){


                    var width = jQuery.width;
                    var center = jQuery.center;
                    var image = jQuery.image;
                              
                    var notcenter = Math.floor((width-center)/2);
                    var rightP = center+notcenter; 

});


初期値を元に、データを表示させる

設定された初期値をブラウザに表示させる。
最初からCSS設定した方が良いのかも知れません。


jQuery(function(){
          jQuery.each(image,function(i,val){
                         if(i == 1)
                         {          
                              jQuery("#mirakurusuraidaa > ul > li").eq(i).css({backgroundImage: "url("+val+")",width:center,height: '320px',overflow:"hidden",left: notcenter,});
                         } else if(i==2){
                              jQuery("#mirakurusuraidaa > ul > li").eq(i).css({backgroundImage: "url("+val+")",width:notcenter,height: '320px',opacity: 0.2,left: rightP,});
                         } else {
                              jQuery("#mirakurusuraidaa > ul > li").eq(i).css({backgroundImage: "url("+val+")",width:notcenter,height: '320px',opacity: 0.2,});                              
                         }
                    });
});

各種カウンタを設定

jQueryのローカルにカウンタ設定。
プロい人ならもっとなんか良いやり方あると思います。



                    var counter = 1;
                    var slidemax = image.length-1;
                    var clickCount = 0;


スライダの画像をnextした時のボタンクリック時の動作

この中で使う変数をそれぞれ定義して、counterの値を1つ上げます。
slideの値が最終値になったら0をcounterに0を代入するようにしています。

counterの値が0か、最後か、それ以外かで条件判定してます。
そしてそれぞれに、どの画像を入れるのかを設定しています。

後はクリック連打防止用にif文が入れてあります。
クリックカウントが2になることはないので必要ないかも知れませんが、
アニメーションがおかしくなりすぎないように、
キューに溜めて順番になるようにしてあります。

後、jQueryでbackground動かす場合に
何故か半透明になるので、liタグの中にimg作って、作成したimgを前に出して、
imgを動かしてliタグの中にbackgroundをopacity1で表示するようにしています。


                    jQuery("#slidenext").click(function(){

                         
                         var centerno = counter+1;
                         var leftimage,centerimage,rightimage;
                         counter++;

                         if(counter == slidemax+1)
                         {
                              counter = 0;
                         }

                         if(counter==0)
                         {
                              leftimage = image[slidemax];
                              centerimage = image[0];
                              rightimage = image[1];
                         } else if(counter==slidemax) {
                              leftimage = image[counter-1];
                              centerimage = image[counter];
                              rightimage = image[0];
                         } else {
                              leftimage = image[counter-1];
                              centerimage = image[counter];
                              rightimage = image[counter+1];
                         }


                         if(clickCount < 1)
                         {
                              jQuery('#mirakurusuraidaa > ul > li').eq(1).append('<img id="centerimage_bg" src="'+leftimage+'" style="z-index:1000; position: absolute" />');
                              jQuery("#mirakurusuraidaa > ul > li").eq(1).css("background-image","url("+centerimage+")");


                         jQuery('#centerimage_bg').animate({
                              opacity:1,
                              left: '-960',

                           }, 1000, 'swing',function() {

                                     jQuery("#centerimage_bg").remove();

                                     jQuery('#mirakurusuraidaa > ul > li').eq(1).queue([]);
                                     jQuery('#mirakurusuraidaa > ul > li').eq(1).stop();

                                   setTimeout(function(){

                                   jQuery("#mirakurusuraidaa > ul > li").eq(0).css({backgroundImage: "url("+leftimage+")",width:notcenter,height: '320px',opacity: 0.2,});
                                   jQuery("#mirakurusuraidaa > ul > li").eq(1).css({backgroundImage: "url("+centerimage+")",width:center,height: '320px',left: notcenter,backgroundPosition: '0'});
                                   jQuery("#mirakurusuraidaa > ul > li").eq(2).css({backgroundImage: "url("+rightimage+")",width:notcenter,height: '320px',opacity: 0.2,});

                                   }, 200);


                                   clickCount = 0;          
                           });

                         }

                    clickCount++;

                    });



prevの動作もほぼおんなじです。
counterが-になり、画像が左に動くか右に動くかが違うだけです。
セレクタをorで取ってclickされたIDなりで判別して、ifの中で
少しコード変える方が良いと思いますが、僕にその精神的余裕がなかったので
別々に書きました。



                    jQuery("#slideprev").click(function(){

                         var centerno = counter+1;
                         var leftimage,centerimage,rightimage;

                         counter--;

                         if(counter < 0)
                         {
                              counter = slidemax;
                         }

                         if(counter==0)
                         {
                              leftimage = image[slidemax];
                              centerimage = image[0];
                              rightimage = image[1];
                         } else if(counter==slidemax) {
                              leftimage = image[counter-1];
                              centerimage = image[counter];
                              rightimage = image[0];
                         } else {
                              leftimage = image[counter-1];
                              centerimage = image[counter];
                              rightimage = image[counter+1];
                         }

                         if(clickCount < 1)
                         {
                              jQuery('#mirakurusuraidaa > ul > li').eq(1).append('<img id="centerimage_bg" src="'+rightimage+'" style="z-index:1000; position: absolute" />');
                              jQuery("#mirakurusuraidaa > ul > li").eq(1).css("background-image","url("+centerimage+")");
     
                              jQuery('#centerimage_bg').animate({
                                   opacity:1,
                                   left: '960',

                                }, 1000, 'swing', function() {

                                jQuery("#centerimage_bg").remove();

                                jQuery('#mirakurusuraidaa > ul > li').eq(1).queue([]);
                                jQuery('#mirakurusuraidaa > ul > li').eq(1).stop();

                                setTimeout(function(){
                                   jQuery("#mirakurusuraidaa > ul > li").eq(0).css({backgroundImage: "url("+leftimage+")",width:notcenter,height: '320px',opacity: 0.2,});
                                   jQuery("#mirakurusuraidaa > ul > li").eq(1).css({backgroundImage: "url("+centerimage+")",width:center,height: '320px',left: notcenter,backgroundPosition: '0'});
                                   jQuery("#mirakurusuraidaa > ul > li").eq(2).css({backgroundImage: "url("+rightimage+")",width:notcenter,height: '320px',opacity: 0.2,});
                                },200)

                              clickCount = 0;     

                              });

                         }
                         clickCount++;
                    });




ボタンをホバーで表示させる

liタグの中にマウスカーソルを当てるとfadeInしながら
ボタンを表示するようにしています。

ただこれliタグで取ると、ボタンの場所にカーソルが行った時に
ホバーのイベントが終了ということになるので、セレクタorでボタンのIDも一緒にとってやりましょう。




                    jQuery("#slideprev,#slidenext").hide();
                    jQuery("#mirakurusuraidaa > ul > li,#slideprev,#slidenext").hover(function(){
                         jQuery("#slideprev,#slidenext").queue([]);
                         jQuery("#slideprev,#slidenext").stop();
                         jQuery("#slideprev,#slidenext").fadeIn(200);

                    },function(){
                         jQuery("#slideprev,#slidenext").queue([]);
                         jQuery("#slideprev,#slidenext").stop();
                         jQuery("#slideprev,#slidenext").fadeOut(500);
                    });


作ってみて思うこと

アニメーションはやっぱりデザインセンスが必要だなと思いました。
jQuery使っても大した物が出来なかったので、継続して学習が必要だと思いました。


このエントリーをはてなブックマークに追加

コメント

"【jQuery】スライダーを作る"
でメシのタネのおすすめを検索したよ!

プログラミング備忘録 | メシのタネ