ポートフォーリオ制作（メディアクエリとJavaScript2）

こんにちは。コンスキです。

今回はJavaScriptを使ってタブレット用のスライダーの部分に動きをつけていきます。

ページネーションの動作
丸の色が切り替わる仕組み

ページネーションの動作

まずは、スライダーの中でもページネーションの部分に動きをつけます。　

非常に単純な動作ですが、上手く動作するために何度もコードを書き直しました。

最終的に動作したコードがこちらです↓

// ページネーションの１番目（１番左）の丸を黒くする
paginationCircle[activeElementIndex].getElementsByTagName('circle')[0].style.fill = '#000000';
	
// 1番目の要素に切り替える
function firstElement() {
	paginationCircle[activeElementIndex].getElementsByTagName('circle')[0].style.fill = '#ffffff';
	setTimeout(function() {
	  activeElementIndex = 0;		
    paginationCircle[activeElementIndex].getElementsByTagName('circle')[0].style.fill = '#000000';
	}, 100);
}
	
// 2番目の要素に切り替える
function secondElement() {
	paginationCircle[activeElementIndex].getElementsByTagName('circle')[0].style.fill = '#ffffff';
	setTimeout(function() {
	  activeElementIndex = 1;		
		paginationCircle[activeElementIndex].getElementsByTagName('circle')[0].style.fill = '#000000';
	}, 100);
}
	
// ３番目の要素に切り替える 
function thirdElement() {
	paginationCircle[activeElementIndex].getElementsByTagName('circle')[0].style.fill = '#ffffff';
	setTimeout(function() {
	  activeElementIndex = 2;		
		paginationCircle[activeElementIndex].getElementsByTagName('circle')[0].style.fill = '#000000';
	}, 100);
}	
	
// ページネーション1番目（左）の丸をクリックされたら1番目の要素に切り替える
paginationCircle[0].addEventListener('click', function() {
	 firstElement();
	});
	
// ページネーション2番目（真ん中）の丸をクリックされたら２番目の要素に切り替える
paginationCircle[1].addEventListener('click', function() {
	secondElement();
});
		
// ページネーション3番目（真ん中）の丸をクリックされたら3番目の要素に切り替える
paginationCircle[2].addEventListener('click', function() {
	thirdElement();
});

このJavaScriptを動作させると次のような感じになります。

上の動画の中では、ブログの画像やブログのタイトル、内容が表示されていません。

ページネーション動きページネーションの黒くなっている丸が切り替わっても、それらは連動して動作しないため非表示にさせています。

丸の色が切り替わる仕組み

クリックするとクリックした丸が黒くなるになっています。

上の方にあるコードの中で色が濃くなっている部分丸の色を変更している部分です。

18行目のコードに注目してみます。

paginationCircle[activeElementIndex].getElementsByTagName('circle')[0].style.fill = '#000000';

例えば、この部分では以前作った作ったsvg要素の中にあるcircle要素の「 fill」というプロパティを「#000000」に変更しています。

こうすることで、真ん中にある丸の色が黒に変わります。

ただ、このままだと左の丸も黒のままであるため、真ん中の丸の色を黒に変える直前に左の丸の色を白に戻しています。（上にあるコードの15行目）

	paginationCircle[activeElementIndex].getElementsByTagName('circle')[0].style.fill = '#ffffff';