jQueryを使った画像の動作処理(レスポンシブwebデザイン)

Question

お世話になっております。毎度大変様々な方から助言をいただき、本当にありがとうございます。
今回ですが、CSSでではなく、javascriptを使用し表示、非表示を操作したいと以下のコードを書きました。
HTML

<div id="picture">
<img  id="1" src="./img/Practice_picture/1.JPG" alt="">
<img  id="2" src="./img/Practice_picture/2.JPG" alt="">
<img  id="3" src="./img/Practice_picture/3.JPG" alt="">
<img  id="4" src="./img/Practice_picture/4.JPG" alt="">
<img  id="5" src="./img/Practice_picture/5.JPG" alt="">
<img  id="6" src="./img/Practice_picture/6.jpg" alt="">
<img  id="7" src="./img/Practice_picture/7.JPG" alt="">
<img  id="8" src="./img/Practice_picture/8.JPG" alt="">
<img  id="9" src="./img/Practice_picture/9.JPG" alt="">
<img  id="10" src="./img/Practice_picture/10.JPG" alt="">    
</div>
<img class="picture_img" id="last" src="./img/sample_picture/top.png" alt="">
<img class="picture_img" id="last2" src="img/HP-mobile.png" alt="" style="display:none;">
<img class="picture_img" id="last3" src="img/Practice_picture/A.JPG" alt="" style="display:none;">

CSS

@media screen and (min-width: 1024px){
	#last
	{
		display:none;
		width:100%;
		opacity:1;
	}
	#header_all_frame_min,.menu-trigger
	{
		display:none;
	}
	.drawer-hamburger
	{
		display:none;
	}
	#picture img
	{
		position:absolute;
		width:100%;
		display:none;
		overflow:hidden;
		background-size:100% 100%;
	}
}
@media screen and (min-width: 480px) and (max-width: 1024px){
	#last
	{
		display:none;
		width:100%;
		opacity:1;
	}
	.picture_img
	{
		position:absolute;
		width:100%;
		display:none;
		overflow:hidden;
		background-size:100% 100%;
	}
	#picture img
	{
		position:absolute;
		width:100%;
		display:none;
		overflow:hidden;
		background-size:100% 100%;
	}
}
@media screen and (min-width: 0px) and (max-width: 480px) {
	#picture img
	{
		position:absolute;
		width:100%;
		display:none;
		overflow:hidden;
		background-size:100% 100%;
	}
	.picture_img
	{
		position:absolute;
		width:100%;
	}
}

JS

	$("#1").css("z-index",1);
	$("#2").css("z-index",2);
	$("#3").css("z-index",3);
	$("#4").css("z-index",4);
	$("#5").css("z-index",5);
	$("#6").css("z-index",6);
	$("#7").css("z-index",7);
	$("#8").css("z-index",8);
	$("#9").css("z-index",9);
	$("#10").css("z-index",10);
	$("#last").css("z-index",11);
	$("#last2").css("z-index",11);
	
	var w = $('body').width();
	var h = $('body').height();
	if(w<h)
	{
		setTimeout(function(){
			$("#last3").fadeIn(600);
		},10);
		setTimeout(function(){
			$("#last2").fadeIn(600);
		},610);
	}else{	
		$("#1").fadeIn(600);
		setTimeout(function(){
			$('#2').fadeIn(150);
		},650);
		setTimeout(function(){
			$('#3').fadeIn(150);
		},850);
		setTimeout(function(){
			$('#4').fadeIn(150);
		},1050);
		setTimeout(function(){
			$('#5').fadeIn(150);
		},1250);
		setTimeout(function(){
			$('#6').fadeIn(150);
		},1450);
		setTimeout(function(){
			$('#7').fadeIn(150);
		},1750);
		setTimeout(function(){
			$('#8').fadeIn(150);
		},1950);
		setTimeout(function(){
			$('#9').fadeIn(150);
		},2150);
		setTimeout(function(){
			$('#10').fadeIn(150);
		},2350);
		setTimeout(function(){
			$('#1,#2,#3,#4,#5,#6,#7,#8,#9,#10').fadeTo("10",0);
		},2550);
		setTimeout(function(){
			$('#1,#2,#3,#4,#5,#6,#7,#8,#9,#10').hide();
			$('#last').fadeIn(1000);
		},3550);
	}

というような形になりました。
やりたいこととしては、width>heightのときスライドショーみたいな形を表示。height>widthの場合、fadeInのみでの画像の表示。また、widthの変化で画像の表示の変化(#lastと#last2,#last3を変化させる)ことです。
問題点として、まずjsで使用しているifがうまく働きません。すべてelse操作になってしまいます。
次にjsのsetTimeoutを使用しているのでcssでレスポンシブwebデザインのwwidthでの判定が無効になる。
といった、点です。
よろしくお願いします。

Comments

[Lhankor_Mhy]

body要素下の要素はご提示の他にありますか？ これだけだとすると、img要素が絶対配置されているので、コンテナが潰れそうな気がしますが。

[kuroishi]

見ていただきありがとうございます。その件ですが、絶対配置にしなければ、画像がうまく重ならずスライドショーの形にすることができません。その他もありますが、機密情報になってしまいますので申し訳ありません。

[Lhankor_Mhy]

コンテナが潰れると、当然にbody要素の高さがなくなると思いますが……

[kuroishi]

大変ありがとうございました！そうですね、恥ずかしいばかりです、すみません。

[Lhankor_Mhy]

もしかして、意図が伝わっていないかな？　img要素が絶対配置されているのでコンテナ要素が潰れ、body要素の高さが0になっているので、w<hが常に偽になっているのではありませんか？　他の要素がどのように配置されているかによると思うので確認してみてください。ということです。

[Lhankor_Mhy]

あ、解決してよかったです。

[kuroishi]

すみません、大変ご丁寧にありがとうございました。body下に他の要素はありますが、今の部分ではdisplay:noneの状態で表示していないので。。。すみません、普通に説明へたくそです。

Answer 1

var w = $('body').width();
var h = $('body').height();

から

var w = $(window).width();
var h = $(window).height();

に変更したら、うまくいきました。
Lhankor_Mhyさん大変ありがとうございました！