jQueryを使ったスライドショーを自作してみた

powered by hm solution

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

お問い合わせ
ブログTOP » web » プログラミング » jQueryを使ったスライドショーを自作してみた

jQueryを使ったスライドショーを自作してみた

jQuery
松葉
もう年の瀬、、、
今年ももう終わってしまうのか。。。
ばいばい巳年、おいでませ午年。
皆様よいおとしを!

さてさて、スライドショーを自作してきましたが、ナイスミドルの今年最後のブログ記事なのでまとめておこうかと。

とてもよい思い出です!
今回僕たち、私たちはスライドショーに時間経過で実行される処理を追加して卒業します!

色々反省点を踏まえて、今回つくったスライドショーがこちら
jQueryはjquery-1.10.2.min.jsを使ってます

一定時間を経過すると繰り返しする処理

setInterval(実行したいこと,繰り返す間隔);

setIntervalを使って、一定間隔で繰り返し関数を呼び出すことにしました。

//まず一定間隔を決めます!
//繰り返しのタイミング2000ミリ秒(2秒間隔)に決定
var time = 2000;
/*
時間経過で実行されるとこ
***********************************************************************************/
// setInterval() を使って、time の間隔ごとに繰り返し slider() を実行
var sliderTimer = setInterval(slider, time);

こんな感じで使ってみました。
こ、こいつ動くぞ!

スライドがはじまるとだれにも止められない!

まあそうですわな、これだけだと止まらないんですよ。
これは困った。ゆっくり写真をみれないや。。。
イメージ写真やボタンにマウスオーバーしてるとスライドを停止できるといいんだけども。。。

clearInterval(sliderTimer);

なんとclearIntervalを使えば処理を停止できるぞ!

//マウスオーバーで処理を停止させるぜ!
$("#button a").hover(function () {
//一定時間ごとに繰り返す処理を停止
clearInterval(sliderTimer);
},function () {
//マウスアウトでもいちど一定時間ごとに繰り返す処理を設定します
sliderTimer = setInterval(slider, time);
});

こんな感じで、実装!

サンプルの実行文

$(function() {
	/*
	数値の初期値
	***********************************************************************************/
	//次のスライド番号 初期値
	var nextSlide = 1;
	//スライドの位置 初期値
	var slideX = 0;
	//自動スライドのタイミング 2000ミリ秒(2秒間隔)
	var time = 2000;
	
	/*
	時間経過で実行されるとこ
	***********************************************************************************/
	// setInterval() を使って、time の間隔ごとに繰り返し slider() を実行
	var sliderTimer = setInterval(slider, time);
	
	/*
	クリックすると実行されるとこ
	***********************************************************************************/
	$('#button a').click(function(){
		//プログラムを呼び出す処理
		slider();
		//後の処理をキャンセルさせる処理?
		return false;
	})
	
	/*
	クリックや時間経過で呼び出されるとこ
	***********************************************************************************/
	function slider(){
		//スライドの移動させたい位置を算出
		slideX = -640*nextSlide;
		//スライドアニメーション
		$("#slide ul").not(":animated").animate({
			//.not(":animated")をつけてやってアニメーションしていない時だけアニメーションさせます
			//レフトの数値を変更してアニメーションさせます
			left:slideX
		},500,"linear",function() {
			//アニメーションが終わったら実行されるとこ
			//スライドが最後だったら最初の値に戻す処理
			if(nextSlide == 3){
				nextSlide = 0;
			}else{
				nextSlide += 1;
			}
		});
	}
	
	/*
	ボタンにマウスオーバーすると実行されるとこ
	***********************************************************************************/
	$("#button a").hover(function () {
		//一定時間ごとに繰り返す処理を停止
		clearInterval(sliderTimer);
	},function () {
		//マウスアウトでもいちど一定時間ごとに繰り返す処理を設定します
		sliderTimer = setInterval(slider, time);
	});
	
	/*
	スライド写真にマウスオーバーすると実行されるとこ
	***********************************************************************************/
	$("#slide img").hover(function () {
		//一定時間ごとに繰り返す処理を停止
		clearInterval(sliderTimer);
	},function () {
		//マウスアウトでもいちど一定時間ごとに繰り返す処理を設定します
		sliderTimer = setInterval(slider, time);
	});
});

こんな感じで一定時間ごとにスライドが実行されるようになりました。

気が付いてみれば、なんだかんだで今年最後の投稿になりました

今年はみなさんどうでしたですか?
そろそろ、コタツに入ってみかん食って、ポテチでもつまんで新年を迎える準備でもしてください。

そして、思い出したら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.