javascriptの製作物２

なんか以前の製作物に、へえって感じのスライドあったんでそれについてのメモ。
クラス名とかいくつか値は実装したやつと変えてます。

	var speed = 4000;
	var array = ["slide1","slide2"];
	$(".slide1").css({
		"opacity":"1",
		"z-index":"2"
	});
	$(".slide2").css({
		"opacity":"0",
		"z-index":"1"
	});
	var timer = setInterval(
		function(){
			$("."+array[0]).animate({
				"opacity":"0",
				"z-index":"1"
			},2000);
			$("."+array[1]).animate({
				"opacity":"1",
				"z-index":"2"
			},2000);
			array.reverse();
		},speed
	);

前回記事と同様に上から解説ー。

１・２行目

var speed = 4000;

ローカル変数名speedって名前の箱作って、中に4000の値を入れてる。

var array = [“slide1″,”slide2”];

ローカル変数名arrayって名前の箱作って、中に一次元配列の[“slide1″,”slide2”]を入れてる。
配列っていうのは、なんかタンスみたいなやつ。
カード勢に説明すると、ストレージボックスの中にデッキケース２つ入れるじゃん。
ストレージボックスの名前がここでいうarrayで、デッキケースの名前がslide1とslide2みたいな。
わかりにくいか。

３〜６行目

$(“.slide1”).css({css内容});

htmlのクラス名.slide1に「css内容」を反映させる。
さっき作った配列とはまだ関係ないから注意。

“opacity”:”1″,”z-index”:”2″

これが.slide1に反映させるcssの内容。２つ。
“opacity”:”1″は透明度。0が0%で1が100%って覚えればいいと思う。
ここでは1だから100%。だから全く透明じゃないってこと。
“z-index”:”2″はレイヤーの重なり順みたいな。数字が大きい方が上になる。
ここでは2だから、z-index:1とかz-index:0のは下にいく。
z-indexはpositionプロパティがないとダメ。relativeとかabsoluteとかfixedとかしよう。

７〜１０行目

さっきのと説明同じだから基本省略。
“opacity”:”0″だと透明すぎて全く見えないみたいな。ソースが消えてはないけど、画面上には表示されない。

１１・１２行目

var timer = setInterval(function(){内容},speed);

var timer = setInterval(内容,値);
setIntervalメソッドは一定時間毎に、内容を繰り返すもの。
値の数値が一定時間。ここではspeedって書いてある。
speedは１行目に4000って数字入れてある。だから、
var timer = setInterval(function(){内容},4000);
と同じ。4000っていうのは4000ミリ秒ね。つまり４秒。

１３〜１６行目

$(“.”+array[0]).animate({内容},2000);

array[0]っていうのはarray配列の０番目。つまり、slide1になる。なので、これに書いてあるのは
$(“.slide1”).animate({内容},2000);
と同じ。
animateはその名の通り、アニメーションを作成するための関数。jQuery。
内容のものに2000ミリ秒かけて変化するってアニメーション。つまり２秒。
ここでは第二引数まで使用してる。第三引数を使えば変化への効果、第四引数を使えばアニメーション終了時についてなんかいろいろできる。

“opacity”:”0″,”z-index”:”1″

これが内容。css。
３〜６行目のところで設定していたのを２秒かけてこれにするよーってこと。

１７〜２０行目

これはさっきのと一緒だから省略。

２１行目

array.reverse();

reverse()は配列を逆順にする。つまり、
var array = [“slide1″,”slide2”];
が
var array = [“slide2″,”slide1”];
になる。

まあこれによってどうなるかっていうと、.slide1と.slide2が交互にフェードインフェードアウトするってもの。
でもこれ、画像が２枚であること前提だからあんまよくない。３枚だったらこれ無理だし。
スライドを実装するなら素直にbxsliderでも使った方がいいね。

なんでこれにへえって思ったかというと、reverse()を使ってたから。面白いなと。
以上。