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

powered by hm solution

お問い合わせ:0120-290-727
受付時間:10:00~18:00(土日祝は除く)

お問い合わせ
ブログTOP » web » チュートリアル » jQuery初心者のために!jQueryの使い方スライドショー編

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

jQuery
松葉
jQuery使って楽しくサイト制作!
年末年始でjQuery勉強できるといいなと思ってます。
むっふ〜ん

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

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

すること

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

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

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

マークアップしてみる

<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>

できるだけ簡単に、、、

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

ポイントは、リストタグで横並びに画像を表示にさせて、それをパックするdivで不要部分を消す。

#slide { width:640px; height:480px; overflow:hidden; position:relative; }
#slide ul { width:2560px; position:absolute; }
#slide ul li { width:640px; float:left; }

#slideで幅640px、高さ480pxの箱を作ってリストを中にいれます。
#slide ulは画像を横並びにするので、画像の幅×画像数の横幅を指定してやります。
#slide ul liでflot指定して横並びの指示を書いてやります。

jQueryを反映してみる

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

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

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

$('#button a').click(function(){
/*クリックされると実行されるとこ*/
})

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

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

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

なるほど、では実際に書いてみます。

$(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() {
			/*アニメーションが終わったら実行されるとこ*/
			/*今はまだなにも考えてないよ*/	
		});
	}
});

よっこらせと、とりあえず、これでサンプル動いてるんでよしとしとこ。
jQueryはこうやって、やりたいことを考えて(できるかどうかは後で考える)、やりたいことをするには、どんな機能が必要か考えて(調べたり)、実際に組み立てます。
今回はスライドショーだけど他でもいっしょですよ!

今後の課題

  • ボタンの連続クリックされるとえらいことに
  • 時間経過でスライドするようにしたい

プログラマでもなんでもないけど、やってみたらちゃんと動くな。
もまえらもやってみれば〜
|Д´)ノ~~ アディオス アミーゴ!

人気記事

カテゴリ一覧

ホームページを新規制作・リニューアルしたい方 ホームページ診断 神戸ホームページ制作センター採用情報
弊社が手がけた制作実績 スタッフブログ ECの運営ならコンサルロケッツにお任せください!!ギュイーン!!
充実の運用サポート 失敗する業者選びの典型例

制作サイトSEO対策実績

今月のSEO対策結果
キーワード順位
出張マッサージ 京都
1位
手元供養 通販
1位
ユニバーサルマナー
1位
外壁塗装 神戸
2位
整体 大阪
1位
姫路 工務店
2位
ブライダルまつげ 神戸
2位
神戸 温泉
1位
葬儀 神戸
1位
温泉 神戸
2位
葬儀 大阪
4位
出張マッサージ 名古屋
3位
学生 プロモーション
1位
オークション 代行
3位
コンテナ 販売
3位
目 資格
1位
学生 広告
1位
大阪 ホテル
1位
ヘアサロン 南船場
3位
リフォーム
1位
ブランドメガネ 買取
3位
防犯カメラ 神戸
1位
大阪 ホテル
1位
兵庫 探偵
2位
出張マッサージ 神戸
1位
カルジェルネイル 神戸
2位
フィラリア予防
3位
神戸 ネットカフェ
1位
薬剤師 求人
1位
合宿免許 ローン
1位
美容院 南船場
3位
神戸 婚活
1位

2013年09月調査結果の一部

ホームページ制作対応エリア

制作エリア
【営業地域】
大阪府/奈良県/滋賀県/京都/和歌山/三重/兵庫県/神戸市/神戸市北区/神戸市西区/三田市/宝塚市/川西市/篠山市/三木市/小野市 /尼崎市/芦屋市/明石市/伊丹市/西宮市/姫路市/西脇市/豊岡市/加古川市/加西市/加東市/相生市/赤穂市/朝来市/淡路市/市川町/宍粟市/竜野市/丹波

【受注可能地域】
大阪府/兵庫県/京都府/滋賀県/奈良県/
和歌山県/三重県/岡山県/徳島県など
全国各地
Googleビジネスパートナー
powered by hm solution
お問い合わせ
お問い合わせ
gmt
© hm solution, Ltd.