いまさら誰も要らないし、機能も微妙ですけど、
練習がてら作ってみました。
何の機能もついてないスライダーなんですけど、
今まで作ったことが無いし作れるかどうかも分かんないので
とりあえず作ろうと思い作れるレベルで作りました。
作ったのはコチラです。
もしも使いたい人が居たらコードは好きに使ってくださって結構です。
INDEX
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の値を１つ上げます。
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使っても大した物が出来なかったので、継続して学習が必要だと思いました。
