POPSブログ

jQuery レスポンシブ・クロスフェード処理

407

  Category:  jquery2017/02/20 pops 

2枚の画像を重ねればクロスフェードが実現します。レスポンシブ形式にして、コントロールボタン付き(内側)、サムネール表示の切り替えが出来る様に機能を拡張したものです。スライダーより構造および処理が簡単になっています。クロスフェード以外のエフェクトも簡単に出来る構造です。

 

responsive

 

TOP画像レスポンシブ・クロスフェード処理のテスト

「前々頁」のレスポンシブ・スライダーを、クロスフェード用に改造しただけです。レスポンシブに関する処理が簡素化されます。
実際に色々作り、その差異を調べてみます。TOP画像としていますが画像幅を縮めれば他の場所でも利用できます。
また他のスライダーなどと同様にA-linkで「メニュー」としての利用が多いようですので、ul.li構造で作っています。

 

max-widthを使用した形

ここより本題に入ります。レスポンシブにはmax-widthを使用すれば対処できます。下記に構造を示します。
通常「お利口」な方はプラグインなどを利用します。メンドウ故自作する方は余り居ないのが現状のようです。

 

DEMO

通常のHTML5ページでみてみます。ブラウザ幅を変更して確認ください。

● 通常デモページ (http://pops-web.com/main/baserhtml/test005.html) : 通常ページでの表示デモ

● スマートフォン等の表示 : 確認ツールで見た場合の表示

 

構造と簡単な説明

 

以下、デモの html css js と簡単な説明です。position設定の違いによる振る舞いに注意ください。
スライダーと異なりブラウザのリサイズの際の処理が簡単です。

クロスフェードには2枚の画像をposition:absoluteで同じ位置に重ねて、上層の透明度を変化させれば良い訳です。animate()を利用すればフェード以外のアニメ処理が可能です。


図の様に、各要素の大きさが同じで連続して重なっている構造の場合は処理が簡単な傾向にあるようです。
「前々ページ」の横並びのスライダー以外は、概ねこのような構造が良い様です。


zu

 

1. 原則、外側divにmax-width:880pxを設定します。(media screenでの設定も同じ)
2. クロスフェードは最低2枚の画像を必要とします。重ねはposition:absolute設定で行う。
(クロスフェードなどのエフェクト専用の「画像層#top-item」をliの一番上に配置します)
3. div.ul.li.imgは同じ大きさで並びますので、ブラウザのリサイズの際修正がいらないのが特徴です。
IE7.8では上手く大きさが継承されない場合もあります。IE7.8はもうドウデモでも良いですが...
(重なり順保持で、念のためli要素にはz-indexをつけています)
4. 外側divは、liがabsolute設定のため自動で伸縮しませんので、随時高さを修正しなければなりません。
(マスクにも利用する場合は、IE系は縦横の大きさ設定が必要です)
5. クロスフェードのみならばマスクの必要は有りません。
6. クロスフェード以外のスライド処理なども行えますのでマスクはあった方が便利です。
7. ulにマスク設定することも可能ですが、divの高さ変更は必要になります。
(外側divをマスクした方が処理が簡単になる様です)
8. 「画像層#top-item」以外のli層はその時に応じて表示、非表示します。重ねはposition:absolute設定で行う。
9. IEの表示不具合は要素の大きさを設定すると正常に表示する場合が多いのは昔からです。(100%は反応しない場合が多い、明示的にpxで設定すれば正常になることが多い)
10. スマートフォンでは大きな画像を縮小表示するので、画像枚数は少ないほうが良い。


● 対応ブラウザと検証

html5.js、css3-mediaqueries.jsを読み込んでいますので、仕方なく「IE」をも検証しました。
当方としては別段IEに対応する気は毛頭有りませんし、特にIE 9 8 7はもはや対応すべきではなく「排除」すべきです。


1. 一応、モダンブラウザおよび、IE 11 10 9 8 7まで表示可能です。(IEは問題ありすぎ...)
(IE11はモダンブラウザに属するが、CSS3、Canvas対応などでは他より劣るので余り対応したくない)
2. 検証はブラウザ付属ので「ペロッパーツール」および「確認ツール」で行いました。(一部、iphone6で確認)
3. デモページで使用のjQueryは jquery-1.11.3.min.js です。


HTML CSS JS

下記にHTML CSS JSを提示します。CSS JSの名前は自由です。一般的にリスト状に下記の様に書くのが好まれます。
このようなものは「A-link」をつけて使用される場合が多いようです。

HTML


<div id="faderBox">
 <ul id="faderBase">
  <li class="image-parts"><a href="#"><img src="/main/baserhtml/images/mainImage-01.jpg" /></a></li>
  <li class="image-parts"><a href="#"><img src="/main/baserhtml/images/mainImage-02.jpg" /></a></li>
  <li class="image-parts"><a href="#"><img src="/main/baserhtml/images/mainImage-03.jpg" /></a></li>
  <li class="image-parts"><a href="#"><img src="/main/baserhtml/images/mainImage-04.jpg" /></a></li>
  <li class="image-parts"><a href="#"><img src="/main/baserhtml/images/mainImage-05.jpg" /></a></li>
 </ul>
</div>

エフェクト専用の画像層を通常は自動で作りますが、li要素の最後に、下記の様に書いても良い。
JS先頭の設定は、makeTop=false に成る。


  <li id="top-item" class="image-parts"><img src="/main/baserhtml/images/mainImage-01.jpg" /></li>

サンプルJS CSS

CSS


/* 重要 */
#wrappr{
/*overflow:hidden;*/
}

/* 本体 */
#faderBox{
position:relative;
width:880px;
height:380px;
margin:0 auto;
padding:0;
background-color:#000000;
overflow:hidden; /* MASK */
}
/* 上書き */
@media screen and (max-width:879px){
	#faderBox{
		width:100%;
	}
}

#faderBase{
position:relative;
width:100%;
height:auto;
margin:0;
padding:0;
}

/* max-width:880pxでも機能する */
/*img absoluteは100%のこと*/
#faderBase li{
list-style:none;
position:absolute;
top:0;left:0;
width:100%;
height:auto;
margin:0;
padding:0;
}
#faderBase li img{
position:absolute;
top:0;left:0;
width:100%;
height:auto;
margin:0;
padding:0;
}

/*span構成コントロール*/
#faderBox #base-prev{
display:block;
position:absolute;
top:0;left:0;
width:20px;
height:100%;
margin:0;
padding:0;
background:url('/main/baserhtml/images/arrow_left_a3.png') no-repeat center center;
cursor:pointer;
z-index:100;
}
#faderBox #base-next{
display:block;
position:absolute;
top:0;right:0;
width:20px;
height:100%;
margin:0;
padding:0;
background:url('/main/baserhtml/images/arrow_right_a3.png') no-repeat center center;
cursor:pointer;
z-index:101;
}

/* btn */
#btnBox{
width:100%;
height:auto;
margin:10px auto;
text-align:center;
z-index:1000;
}
#btnBox span{
width:100%;
height:auto;
margin:5px;
font-size:16px;
color:#000000;
cursor:pointer;
}
#btnBox span.active{
color:#ff0000;
}

#btnBox span img{
width:40px;/*40x18*/
height:18px;
border:#fff 1px solid;
}
#btnBox span img.active{
border:#f00 1px solid;
}

JS


//simple-fader.js
//画像fader、absolute方式
//コントロールspan構成/a-linkつき
//IE7スクロールOK

(function($){

  $(function(){

    function init(){

	//画像の大きさ
	var image_w=880;
	var image_h=380;

	//時間
	var cycle_time=8000;
	var fade_time=800;

	//コントロールBTNの使用
	var ctrlbtn_use=true;
	//TOPを作るtrue、作らないfalse
	var makeTop=true;
	//BTNグループの使用true、不使用false
	var hitbtn_use=true;
	//サムネール使用true、ボタンはfalse
	var thumb_use=true;
	//サムネールの大きさはCSSで設定

	//オブジェクト
	var box_elm_wrap=$('#faderBox');
	var box_elm=$('#faderBase');
	var img_elm=$('#faderBase li');

	//変数、未使用あり
	var image_max=img_elm.length;
	var timerID=null;
	var image_no=0;
	var keep_no=0;
	var image_urls=[];
	var fadeelm=[];//オブジェクト保存
	var top_elm;
	var animeflag=false;

	//BTNオブジェクト
	var hit_btns=[];

	var width_v=image_w;
	var height_v=image_h;

	//liエレメント追加
	if(makeTop){
		box_elm.append('<li id="top-item" class="image-parts"><img /></li>');
		top_elm=$('#top-item');//IDつけ早くする
		var url=img_elm.eq(0).find("a").children("img").attr('src');
		top_elm.children("img").attr('src',url);
		img_elm=box_elm.children("li");//再認識させる
	}else{
		top_elm=$('#top-item');//ID
		image_max=img_elm.length-1;//MAX変更
	}

	//URL取得、liオブジェクト保存
	box_elm.find('li').each(function(i){
		fadeelm[i]=img_elm.eq(i);//オブジェクト保存
		fadeelm[i].css({'z-index':i,'display':'none'});//z-index、すべて非表示
		image_urls[i]=$(this).find("a").children("img").attr('src');//URL保存
	});

	//コントロールBTN/span構成
	if(ctrlbtn_use){

		//append #sliderBase
		box_elm_wrap.append('<span id="base-prev"></span>');
		box_elm_wrap.append('<span id="base-next"></span>');

		//オブジェクト
		var next_elm=$('#base-next');
		var prev_elm=$('#base-prev');

		//click-action
		next_elm.click(function(){
			//アニメ中はキャンセル
			if(animeflag){return false}
			//タイマーclear
			clearTimeout(timerID);
			next_set();
			return false
		});
		prev_elm.click(function(){
			//アニメ中はキャンセル
			if(animeflag){return false}
			//タイマーclear
			clearTimeout(timerID);
			prev_set();
			return false
		});

	}
	//BTNグループaction-set
	if(hitbtn_use){

		//後ろにappendする
		box_elm_wrap.after('<div id="btnBox"></div>');
		var mark="&#9679;";
		//make-btn
		var btnhtml="";
		for (var i=0; i < image_max; i++) {

			//ID名を付ける
			var name="hitbtn"+i;
			if(thumb_use){
				thumb='<img class="thumb" src="'+ image_urls[i] +'" />';
				btnhtml += '<span id="' + name +'">' + thumb + '</span>';
			}else{
				btnhtml += '<span id="' + name +'">' + mark + '</span>';
			}

		}
		//append #btnBox
 		$('#btnBox').append(btnhtml);
		btnhtml="";

		//action
		$('#btnBox').find('span').each(function(i){
			$(this).click(function(){hitno_set(i);});
		});
		//オブジェクト保存
		for (var i=0; i < image_max; i++) {
			hit_btns[i]=$('#hitbtn'+i);
		}

		//最初をactiveに
		if(hitbtn_use){
			if(thumb_use){
				hit_btns[0].children("img").addClass('active');
			}else{
				hit_btns[0].addClass('active');
			}
		}

	}

	//初期化、寸法きめ
	resizeFunc();

	//display
	fadeelm[0].css({'display':'block'});
	top_elm.css({'display':'block'});
	//現在の番号
	image_no=0;

	//スタート遅延なし
	set_timer();

	//エフェクト処理
	function effectImage(){

		animeflag=true;
		//位置情報
		var pos_x=width_v;
		var pos_y=height_v;

		if(hitbtn_use){
			if(thumb_use){
				hit_btns[keep_no].children("img").removeClass('active');
			}else{
				hit_btns[keep_no].removeClass('active');
			}
		}

		//事前処理
		top_elm.css({'display':'none'}).css({'opacity':0});
		top_elm.children("img").attr({'src':image_urls[image_no]});//画像切り替え
		top_elm.css({'display':'block'});

		//クロスフェード
		top_elm.animate({'opacity':1},fade_time,function(){

			//階層処理
			fadeelm[image_no].css({'display':'block'});
			top_elm.css({'display':'none'});
			fadeelm[keep_no].css({'display':'none'});
			//処理番号保存
			keep_no=image_no;
			animeflag=false;

			if(hitbtn_use){
				if(thumb_use){
					hit_btns[image_no].children("img").addClass('active');
				}else{
					hit_btns[image_no].addClass('active');
				}
			}

			set_timer();

		});

	}

	//次ぎの開く要素を計算
	function next_set() {
		//次ぎの番号
		image_no +=1;
		if (image_no > (image_max-1)) {image_no=0;}
		effectImage();
	}
	//戻る要素を計算
	function prev_set() {
		//戻る番号
		image_no -=1;
		if (image_no < 0) {image_no=image_max-1;}
		effectImage();
	}
	//指定番号で計算
	function hitno_set(no) {

		//表示番号ならキャンセル
		if(no==keep_no){return false}
		//アニメ中はキャンセル
		if(animeflag){return false}
		//タイマーclear
		clearTimeout(timerID);
		//番号
		image_no=no;
		effectImage();
		return false
	}

	//タイマーSET
	function set_timer(){

		//一旦切ってからセット
		clearTimeout(timerID);
		timerID=setTimeout(next_set,cycle_time);

	}

	//window-resize
	$(window).resize(resizeFunc);

	//スライドのためBOXの大きさ設定
	function resizeFunc(){

		window_width=$(window).width();

		//BOX修正
		if(window_width<image_w){

			var w=window_width;
			var ratio=window_width/image_w;
			var h=image_h*ratio;

			//現在の大きさ
			width_v=w;
			height_v=h;

			box_elm_wrap.css({'width':w,'height':h});
			//box_elm.css({'width':w,'height':h});//MASKなら大きさ必要

		}else{

			//現在の大きさ
			width_v=image_w;
			height_v=image_h;

			box_elm_wrap.css({'width':image_w,'height':image_h});
			//box_elm.css({'width':image_w,'height':image_h});//MASKなら大きさ必要

		}

	}

    }//init end

    //--------------------------

    //遅延/IE7
    setTimeout(function() {
      init();
    },10);

  });

})(jQuery);


HTML5でのテスト表示結果

通常デモページ (http://pops-web.com/main/baserhtml/test005.html) のHTML構成を違わせてテストした結果、モダンブラウザおよび IE7-11 まで表示結果はOKでした。

重要、ブラウザ右外側に「空白」が出来る場合がありますが除去の処理です。body直下の全体をラップした要素に overflow:hidden 設定すれば除去出来ます。「空白」の出ない処理方法もありますが...


#wrappr{
overflow:hidden;
}

つまり、max-width をそのまま単独で使用すれば、構造によっては右外側に「空白」が出来る。

media screen設定を上書きすれば、直りますが...

@media screen設定の場合。

スライダーにmedia screen設定の場合は下記の様になるが、余りこのような設定で使用する事は無いと思う。
この場合、max-widthは media screen に設定されますので要素の幅は width:940px となる。

また個別にmedia screen 設定されましたので右に空白は出ません。心配な方はそのままでも結構です。HTML表示に影響は有りません。


● max-width設定の場合


max-width設定の場合、空白がでる

#faderBox{
position:relative;
max-width:880px;
height:380px;
margin:0 auto;
padding:0;
background-color:#000000;
overflow:hidden; /* MASK */
}

空白除去のため必要です
#wrappr{
overflow:hidden;
}

● @media screen設定の場合 (デモはこちらを設定しました)


@media screen設定の場合、空白が出ない

#faderBox{
position:relative;
width:880px;
height:380px;
margin:0 auto;
padding:0;
background-color:#000000;
overflow:hidden; /* MASK */
}
/* 上書き */
@media screen and (max-width:879px){
	#faderBox{
		width:100%;
	}
}

スライダーに@media screen設定のため
下記の空白除去は原則不要です
#wrappr{
overflow:hidden;
}

処理の相違点

「前々ページ」のスライダーと比較して処理が簡単です。ul要素をマスクに使用する場合は大きさの設定が必要になります。サンプルでは「外側のdiv要素」をマスク利用しています。
IE7.8では上手く大きさが継承されない場合もありますのでマスクを使用しなくとも横幅設定が必要。(モダンブラウザ他はOK)


下記、ブラウザリサイズの関数はPC向けの処理です。スマートフォンなどのデバイスはmax-widthにより適正に表示されます。


function resizeFunc(){

	window_width=$(window).width();

	//BOX修正
	if(window_width<image_w){

		var w=window_width;
		var ratio=window_width/image_w;
		var h=image_h*ratio;

		//現在の大きさ
		width_v=w;
		height_v=h;

		box_elm_wrap.css({'width':w,'height':h});//横幅設定した方が良い
		//box_elm.css({'width':w,'height':h});//MASKなら大きさ必要

	}else{

		//現在の大きさ
		width_v=image_w;
		height_v=image_h;

		box_elm_wrap.css({'width':image_w,'height':image_h});//横幅設定した方が良い
		//box_elm.css({'width':image_w,'height':image_h});//MASKなら大きさ必要

	}

}

マスクなしの場合「外側のdiv要素」のY方向の伸縮が出来ないので動的に処理する必要があります。

この構造では、色々なブラウザを考慮して、横幅も設定した方が良いと思われます。


モダンブラウザ系統は下記でもよいのですが

box_elm_wrap.css({'height':h});
および
box_elm_wrap.css({'height':image_h});

--------------------------------------------------

IE7.8は最上位の親要素の大きさ設定が必要

box_elm_wrap.css({'width':w,'height':h});//横幅設定した方が良い
および
box_elm_wrap.css({'width':image_w,'height':image_h});//横幅設定した方が良い

● スライド(エフェクト)処理も出来ます。

サンプルではクロスフェードになっていますが、他にスライドなどのエフェクト処理もできる構造です(画像横幅の制約あり)。
事前に左右に移動しておき、'left':0を加えればスライドします。画像拡大(縮小はOK)以外はほぼアニメ処理出来ます。

位置情報は現在使用していません、複雑なエフェクト処理で IN OUT などの区別をする時に使用できます。


//位置情報
var pos_x=width_v;
var pos_y=height_v;

//事前処理で移動しておく
top_elm.css({'display':'none'}).css({'opacity':0,'left':pos_x});

//クロスフェードとスライド
top_elm.animate({'opacity':1,'left':0},fade_time,function(){
	//略す
});

注意、max-width:880px設定の中での「画像幅」は最大で「880px」の制約を受けますので「画像拡大」の場合は「画像横幅」が思い通りのアニメにはなりません。「画像縮小」は問題有りません。


● 色々なエフェクト処理の組み合わせ例です。タイトルがbaserCMS4系ですが、どのCMSでも基本的に設置できるはずです。

【参照】当方の記事: baserCMS4.0系 TOP画像のエフェクト処理2

模擬デモページ (http://pops-web.com/main/baserhtml/top17.html) : TOPページの模擬出力HTML


● 画像の取替え。

少し冗長に処理しています。一旦、li要素を非表示にしてから、中の画像を取り替えています。(少し訳があります)


//事前処理
top_elm.css({'display':'none'}).css({'opacity':0});
top_elm.children("img").attr({'src':image_urls[image_no]});//画像切り替え
top_elm.css({'display':'block'});

下記の様に簡略はできますが、マシン環境が悪い場合に画像処理が遅く一瞬画像を表示してしまう恐れがあります。最近のマシンは処理が早いので必要はありません。問題があればこの辺の処理も疑ってください。


//事前処理
top_elm.css({'opacity':0});
top_elm.children("img").attr({'src':image_urls[image_no]});//画像切り替え

● li要素の大きさ設定は下記の様になっています。

ウインドウリサイズによっても、何ら処理を行わなくとも画像は自動で縮小されます。
width:100% が判り易いのでその様に設定しました。


こちらで処理

#faderBase li{
list-style:none;
position:absolute;
top:0;left:0;
width:100%;
height:auto;
margin:0;
padding:0;
}

----------------------------------------

max-width:880pxでも機能する
img absoluteは100%のこと

#faderBase li{
list-style:none;
position:absolute;
top:0;left:0;
max-width:880px;
height:auto;
margin:0;
padding:0;
}

● each()文の処理の注意。

each()文処理が結構あると思います。CSSセレクター指定がそのまま使用出来る利便性がありますが、一部スマートフォン、タブレットで認識出来ない場合がある様です。OSが古いのが原因と思うのですが... 良くは判りません。


つまりは、複数の「確認ツール」で動作確認した方が安心できます。但しPCでは何ら問題は出ません。

認識出来ない場合がある例、(下記の様に書く場合が多いと思います)


$('#faderBase .image-parts').each(function(i){
	//認識しない場合がある
});

find()、children() 等と組み合わせると認識するし、jQueryではこの方が処理が早い。


$('#faderBase').find(".image-parts").each(function(i){
	//OK
});

または

$('#faderBase').find("li").each(function(i){
	//OK
});

ご存知とは思いますが、ここでの.each()はjQuery固有の関数ではなく、実際にはjavascriptの関数を実行しています。


● ul.li構造以外で構成する場合。

ul.li構造が判り易いからの説明ですが、単純化すれば下記の構造でも構成は可能になります。
最下段、「imgのみの簡易形式」にサンプルを掲示します。


<div>
 <div>
  <img />
  <img />
  .
  .

 </div>
</div>

コントロールボタンの処理

「コントロールボタン」「Pagerボタンの作成」はスライダーの場合と同じです。何かと処理し易いので「span要素」で作っています。

NEXT PREV、つまり「次に」「戻る」ボタンです。


1. レスポンシブ・スライダーでのNEXT PREVボタンはほとんどが「画像の上に配置」されています。
2.「画像の外側に配置」すると処理が大変になるから手抜きしているのです。
3.「矢印」は背景に常時、透過PNG画像を中央表示している例が多い。
(スマートフォンはHOVERアクションが機能しないなどの理由で常時表示が無難)
4.「矢印」収納のBOXを「div要素」で作ると高さをその都度調整しなければならない場合が多い。
(マスクが効かない場合がある、下のPagerを被いボタンが機能しないことがあるので注意)
5. 「span要素」で作ると高さの調整がいらないので、こちらで作成しました。


何ら変哲のない作り方です。アニメスライド実行中は、機能しないようにしている。


//コントロールBTN/span構成
if(ctrlbtn_use){

	//append #faderBase
	box_elm_wrap.append('<span id="base-prev"></span>');
	box_elm_wrap.append('<span id="base-next"></span>');

	//オブジェクト
	var next_elm=$('#base-next');
	var prev_elm=$('#base-prev');

	//click-action
	next_elm.click(function(){
		//アニメ中はキャンセル
		if(animeflag){return false}
		//タイマーclear
		clearTimeout(timerID);
		next_set();
		return false
	});
	prev_elm.click(function(){
		//アニメ中はキャンセル
		if(animeflag){return false}
		//タイマーclear
		clearTimeout(timerID);
		prev_set();
		return false
	});

}

● コントロールBTNの使用

コントロールBTNの使用のJSですからtrueで使用しますが、仮にfalse設定ではボタンが生成されません。
コントロール幅はCSSで調整します。大体30以上。


//コントロールBTNの使用、trueのこと
var ctrlbtn_use=true;

Pagerボタンの作成

Pagerボタンの作成は「span」要素で行っている。floatせずに横に並ぶので便利である。スマートフォンを考慮してほとんどが画像数最大5-6個で使用されるので「span」要素構成が効率的と思う。
「active」クラス処理のため「span」要素にIDを付与している。この方が処理が早くなる。

注意、Pagerボタンはスライダー本体の外側に配置されています。表示形態はJS先頭で設定可能です。
サムネールの大きさ間隔などはCSSで設定します。

現在、Pagerボタンは「●」を表示している。四角なら「■」、&#9632; である。

画像サムネール表示なら「img」要素を入れればよい。あとで事前に保存している「画像URL」をattr()すれば表示出来る。



if(hitbtn_use){

	//後ろにappendする
	box_elm_wrap.after('<div id="btnBox"></div>');
	var mark="&#9679;";
	//make-btn
	var btnhtml="";
	for (var i=0; i < image_max; i++) {

		//ID名を付ける
		var name="hitbtn"+i;
		if(thumb_use){
			thumb='<img class="thumb" src="'+ image_urls[i] +'" />';
			btnhtml += '<span id="' + name +'">' + thumb + '</span>';
		}else{
			btnhtml += '<span id="' + name +'">' + mark + '</span>';
		}

	}
	//append #btnBox
 	$('#btnBox').append(btnhtml);

	省略

}

● サムネールのCSS

サムネールとボタンではCSSが違います。サムネールの大きさは表示を確認して決めてください。
activeの場合は下記の様に簡単に設定しています。変更は自由。


#btnBox span img{
width:40px;/*40x18*/
height:18px;
border:#fff 1px solid;
}
#btnBox span img.active{
border:#f00 1px solid;
}

 

imgのみの簡易形式 (参考)

簡素化のためdiv要素の中にimgを直接配置したもので、ul.li構造では有りません。
コントロール、サムネールなどなしの画像4-5枚位のスライドショー的なものです。クロスフェード処理の原型です。
当然コントロール、サムネールなど付加できますが説明上省略しています。


通常のHTML5ページでみてみます。ブラウザ幅を変更して確認ください。

● 通常デモページ (http://pops-web.com/main/baserhtml/test005b.html) : imgのみの簡易形式デモ

● スマートフォン等の表示 : 確認ツールで見た場合の表示

 

下記に簡単に HTML JS CSS を掲示します。

imgのみのこの構造構成では、IE8のみ外側divに横幅が必要のようです。少々の構造変化でIEは振る舞いが変わるので大変です。(IE対応の必要性はもう有りませんが...)


サンプルHTML JS CSS

HTML (#top-itemは手書きで書きます)


<div id="faderBox">
 <div id="faderBase">
  <img src="/main/baserhtml/images/mainImage-01.jpg" />
  <img src="/main/baserhtml/images/mainImage-02.jpg" />
  <img src="/main/baserhtml/images/mainImage-03.jpg" />
  <img src="/main/baserhtml/images/mainImage-04.jpg" />
  <img src="/main/baserhtml/images/mainImage-05.jpg" />
  <img id="top-item" src="/main/baserhtml/images/mainImage-01.jpg" />
 </div>
</div>

CSS


/* 本体 */
#faderBox{
position:relative;
width:880px;
height:380px;
margin:0 auto;
padding:0;
background-color:#000000;
}
/* 上書き */
@media screen and (max-width:879px){
	#faderBox{
		width:100%;
	}
}

#faderBase{
position:relative;
width:100%;
height:auto;
margin:0;
padding:0;
}

#faderBase img{
position:absolute;
top:0;left:0;
width:100%;
height:auto;
margin:0;
padding:0;
}

JS


//simple-fader2.js
//画像fader、absolute方式、マスクなし
//faderのみ
//IE7スクロールOK

(function($){

  $(function(){

    function init(){

	//画像の大きさ
	var image_w=880;
	var image_h=380;

	//時間
	var cycle_time=8000;
	var fade_time=800;

	//オブジェクト
	var box_elm_wrap=$('#faderBox');
	var box_elm=$('#faderBase');
	var img_elm=$('#faderBase img');
	var top_elm=$('#top-item');//ID

	//変数、未使用あり
	var image_max=img_elm.length-1;
	var timerID=null;
	var image_no=0;
	var keep_no=0;
	var image_urls=[];
	var fadeelm=[];//オブジェクト保存

	var width_v=image_w;
	var height_v=image_h;

	//URL取得、liオブジェクト保存
	box_elm.find('img').each(function(i){
		fadeelm[i]=img_elm.eq(i);//オブジェクト保存
		fadeelm[i].css({'z-index':i,'display':'none'});//z-index、すべて非表示
		image_urls[i]=$(this).attr('src');//URL保存
	});

	//初期化、寸法きめ
	resizeFunc();

	//display
	fadeelm[0].css({'display':'block'});
	top_elm.css({'display':'block'});
	//現在の番号
	image_no=0;

	//スタート遅延なし
	set_timer();

	//エフェクト処理
	function effectImage(){

		//事前処理
		top_elm.css({'opacity':0});
		top_elm.attr({'src':image_urls[image_no]});//画像切り替え
		top_elm.css({'display':'block'});

		//クロスフェード
		top_elm.animate({'opacity':1},fade_time,function(){

			//階層処理
			fadeelm[image_no].css({'display':'block'});
			top_elm.css({'display':'none'});
			fadeelm[keep_no].css({'display':'none'});
			//処理番号保存
			keep_no=image_no;
			set_timer();

		});

	}

	//次ぎの開く要素を計算
	function next_set() {
		//次ぎの番号
		image_no +=1;
		if (image_no > (image_max-1)) {image_no=0;}
		effectImage();
	}

	//タイマーSET
	function set_timer(){

		//一旦切ってからセット
		clearTimeout(timerID);
		timerID=setTimeout(next_set,cycle_time);

	}

	//window-resize
	$(window).resize(resizeFunc);

	//スライドのためBOXの大きさ設定
	function resizeFunc(){

		window_width=$(window).width();

		//BOX修正
		if(window_width<image_w){

			var w=window_width;
			var ratio=window_width/image_w;
			var h=image_h*ratio;

			//IE8のみ横幅が必要
			box_elm_wrap.css({'width':w,'height':h});

		}else{
			box_elm_wrap.css({'width':image_w,'height':image_h});

		}

	}

    }//init end

    //--------------------------

    //遅延/IE7
    setTimeout(function() {
      init();
    },10);

  });

})(jQuery);


 

JS最後の遅延処理

主にIE系ですが、画像を読み込んでからでなければ、上手く動作しない場合など1秒位遅延させると良い場合があります。その対策で付けていますが、今回は必要ではありませんでした。


//遅延/IE7
setTimeout(function() {
 init();
},10);

 

使用画像

原則、使用者が用意します。(880x380サイズ) : サンプルでの使用画像


透過PNG画像、下に来る画像の色合いによっては認識しづらい場合が有ります。下は自作品で、品質は良くない。
別画像の必要なかたは自作するか、ネット上でプラグイン付属画像をパクッテください。

透過画像 透過画像 透過画像 透過画像 透過画像 透過画像 透過画像 20x20透過画像
---


スライダー処理の場合は下記ページ参照ください。

【参照】当方の記事: jQuery レスポンシブ・スライダー、エンドレスタイプ

【参照】当方の記事: jQuery レスポンシブスライダー処理


 

モット効率的な方法もあるかも知れませんが、まだ判りません。誰か考えてください。
構造と設定次第で振る舞いが違うので大変です。簡単ですが、以上です。

 


[ この記事のURL ]


タグ:jquery , Effect , css3 , html5

 

ブログ記事一覧

年別アーカイブ一覧



[1]