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

powered by hm solution

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

お問い合わせ

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でも勉強してみれば〜
|Д´)ノ~~ アディオス アミーゴ!良いお年をお迎えください!

powered by hm solution
お問い合わせ
お問い合わせ
gmt
© hm solution, Ltd.