jQuery初心者のために！jQueryの使い方スライドショー編

2013年12月9日

以前jQueryの「コピペは卒業！jQueryリファレンスまとめ」なんて記事を書きましたが、今回は実際にスライドショーを自作してみよう！と思いたちました。
車輪の再開発でもいいんです、自分のしてみたいことを、自分流でやってみるのが大事じゃないかな！ということで、、、
ナイスミドルが作業した流れをまとめてみました。

jqueryはjquery-1.10.2.min.jsを使ってます
あ！実際につくったものはこちら

すること

どんなスライドショーにしたいかまず決める。
マークアップしてみる
jQueryを反映してみる

どんなスライドショーにしたいかまず決める。

今回は、よくみる簡単なスライドショー、ボタンクリックで次のスライドへ移動で最後までいったら最初へもどるようにさせよう！
※時間経過で次へとかはまた考えよう。。。
これだけ、、、ちょっとづつ工夫することを増やしていけばいいと思うし。

マークアップしてみる

[html]
<div id=”slide”>
<ul>
<li><img src=”img/img1.jpg” alt=”##” /></li>
<li><img src=”img/img2.jpg” alt=”##” /></li>
<li><img src=”img/img3.jpg” alt=”##” /></li>
<li><img src=”img/img4.jpg” alt=”##” /></li>
</ul>
</div>
<div id=”button”><a href=”#”>ボタン</a></div>
[/html]

できるだけ簡単に、、、

そんでスタイルシートで整形

ポイントは、リストタグで横並びに画像を表示にさせて、それをパックするdivで不要部分を消す。
[css]
#slide { width:640px; height:480px; overflow:hidden; position:relative; }
#slide ul { width:2560px; position:absolute; }
#slide ul li { width:640px; float:left; }
[/css]
#slideで幅640px、高さ480pxの箱を作ってリストを中にいれます。
#slide ulは画像を横並びにするので、画像の幅×画像数の横幅を指定してやります。
#slide ul liでflot指定して横並びの指示を書いてやります。

jQueryを反映してみる

利用するjQueryを検討するので、思いつく機能を書いていきます
えっとね、クリックしたらスライドするとしたいので、

クリックするのでクリックイベントを取得する機能
スライドするのでアニメーション機能

ん〜これだけかな、、、
クリック→スライドショー→クリック→スライドショー→クリック→スライドショー→クリック→スライドショー、、、、
ってできるかな

[javascript]
$(‘#button a’).click(function(){
/*クリックされると実行されるとこ*/
})
[/javascript]

クリックイベントはこうやって取得できるんで、
クリックされたらプログラムを実行するようにしてやります。

さって、つぎはクリックされたらスライドするアニメーション、

[javascript]
$(“#slide ul”).animate({
/*アニメーション指示をしてやるとこ*/
},500,”linear”,function() {
/*アニメーションが終わったら実行されるとこ*/
});
[/javascript]

なるほど、では実際に書いてみます。
[javascript]
$(function() {
/*
数値の初期値
***********************************************************************************/
//現在のスライド番号　初期値
var nowSlide = 0;
//スライドの位置　初期値
var slideX = 0;

/*
クリックされると実行されるとこ
***********************************************************************************/
$(‘#button a’).click(function(){
//スライドが最後だったら最初の値に戻す処理
if(nowSlide == 3){
nowSlide = 0;
}else{
nowSlide += 1;
}
//プログラムを呼び出す処理
slider(nowSlide);
//後の処理をキャンセルさせる処理？
return false;
})

/*
クリックされると呼び出されるとこ
***********************************************************************************/
function slider(nowS){
//スライドの移動させたい位置を算出
slideX = -640*nowS;
//スライドアニメーション
$(“#slide ul”).animate({
//レフトの数値を変更してアニメーションさせます
left:slideX
},500,”linear”,function() {
/*アニメーションが終わったら実行されるとこ*/
/*今はまだなにも考えてないよ*/
});
}
});
[/javascript]
よっこらせと、とりあえず、これでサンプル動いてるんでよしとしとこ。
jQueryはこうやって、やりたいことを考えて（できるかどうかは後で考える）、やりたいことをするには、どんな機能が必要か考えて（調べたり）、実際に組み立てます。
今回はスライドショーだけど他でもいっしょですよ！