メシのタネ

Webプログラミング 備忘録

  • DOMをPHPで操作できたらいいよね

    そうだよね。そう思うよね。JavaScriptでやると、画面がガタついたりするもんね。そうならないようにする方法もあるかもしれないけど、僕はできませんので、サーバー側でなんとかできたらええなぁと思って挑戦したけど、できませんでしたよ。PHP標準でHTMLをDOMにできるらしい今、技[...]

    続きを読む
  • 設計書ってなんで書くの?

    設計書をなぜ書くのかから始めてかれこれ3年近くこの禅問答をやっているわけですが、いまだに答えは出ません。ただ、その禅問答をやる中で設計書に対する取り組み方は大きく変わったので、その一部でも書いていきたい。基本設計はとにもかくにも必要だと思う設計書はいらぬ!という話をよく聞くし、自分[...]

    続きを読む
  • 書ききってやる。

    久々に書いてみる。久々に文章を書くということをやってみようと思う。伝える作業を観察したいと思ったからそうしたいと考えた。情緒的な文章は基本的にゴミ箱にぽいしてきましたが、情緒的なのも自分だと思う。「文章をかくという作業は、とりもなおさず自分と自分をとりまく事物との距離を確認すること[...]

    続きを読む
  • 普通の会社で2年普通に働いて思う事

    えらい寒くなりました。文句言いながらも現職を続けて2017年12月1日にめでたく2年がたちました。分かりやすいが乱暴に言えばITドカタと呼ばれる業界に入って案件のヒエラルキーの無慈悲さを痛感しながらも、それでもしょうがないと頑張る人たちに心を打たれながら「じゃあ俺も」と頑張れない自分に挫折して、とあ[...]

    続きを読む
  • jQueryUiのDatepicker利用時にminDate設定するとバグる件

    題名の通りなんですが、DatepickerでminDate使うとバグります。また後でキャプチャ見て貰いますけど、灰色の部分が、minDateで設定した日付が反復して出るようになるんですね。こういうの気が付かない人がいるかも知れませんが、ChoromeでminDate設定してる人は気にしてみてくだ[...]

    続きを読む

【jQuery】スライダーを作る

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

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使っても大した物が出来なかったので、継続して学習が必要だと思いました。

関連記事

コメントをお待ちしております