POPSブログ

baserCMS4.0系 TOP画像のエフェクト処理

400

  Category:  basercms2017/01/06 pops 

baserCMS4.0系をローカル環境にインストールしたレスポンシブデザインでテーマの「TOP画像のエフェクト」(アニメ)処理をレスポンシブ対応にしてみました。結構構造がメンドウですが、一応動作します。

 

responsive

 

baserCMS4.0系 TOP画像のFadeおよびSlide処理のテスト

画像のレスポンシブ表示の知識をえて、次はエフェクト(アニメ)処理を行ってみます。構成などは前ページの技法を踏襲します。
実際に色々作り、その差異を調べてみます。DEMOはローカル動作で生成したHTMLを表示しています。
注意、動作確認の模擬ページですので、リンクなどは機能しません。

 

max-widthを使用した形

ここより本題に入ります。下記に構造を示します。

ppap

 

1. max-widthに最大の幅を設定します。(通常はpx値で指定します)
2. 画像を position:absolute で配置します。(フロートしている状態)
3. 問題はラップ層の高さ調整をJSでしなければならない事です。(自動的に成る構造はあるのか不明...)
4. 画像の大きさからラップ層の高さ算出して補正します。
5. 一言で言えば、jQueryでモダンブラウザ以外にも対応しているので問題が起きている。
また、ブラウザ対応の不具合もあろうかとも思います。


エフェクト処理のための基本構造

HTML5 CSS3 処理のため、本来はCSS3でのエフェクトを行いたいのですが、まだブラウザなど対処していませんので、通常のjQueryで処理します。基本的にはIE10以上、または各種のモダンブラウザ対応になります。
IE7 8 9 10でも表示動作するが、本来は対処したく無いのが本音。


画像の配置

使用者が簡単に画像配置できる様「リスト」形式に構成する例が多い。

リストの最後に最初の画像をまた配置する(JSで動的に作る場合もある)。最後がエフェクト(animate())の対象になる。その他は「表示」「非表示」の切り替えをしている。


● 「li」リスト構造だとCSS等がメンドウ。「div」のみで構成しても結果は同じでした。(リスト構造には違いない)

IE10 9 8 7 でも上手く表示出来ます。但しIE7でマスク出来ないなどの不具合がある。
もはや、IE9 8 7 に対応したいとは思っていませんが....
但し「li」と「img」を動かせるので複雑なエフェクトを作り易い利点がある。



<div>
 <ul>
  <li><img /></li>
  <li><img /></li>
  .....
 </ul>
</div>

● 画像のみ並べたほうがCSS等が簡単な傾向にあるが、振る舞いは同じである。

IE7は画像を表示出来ない場合もある。(本来、IE10 9 8 7は排除すべき時代である...、IE11でもまともではない...)

最後に最初の画像をまた配置する。上の例と同じにします。


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

中央表示の不具合修正

margin:0 autoで中央表示を行った場合、下図中央の様に、構造によってはスクロールバーなどが出て、右側に少し余白が出て横幅が広がる場合があります。また、position:absoluteで配置した場合も同様です。
処理的には余白など求めていない、バグである。
下記の様にすれば修正可能です。


<div id="Page">と中央表示


TOP画像のエフェクト処理の構造を中央に配置するに「position修正」で上手く行かないので、margin:autoで処理している。
これも問題があるが、一番外側のDIV要素に overflow:hidden でスクロールを除去できる。
(スマートフォンでも同じ症状がでるので、必要な処理です)


page

 

各ページのHTML構成は、下記の様に、ID「Page」のDIV要素でラップなっています。
(baserCMS構成の場合は「Page」でラップする癖が今回役に立つ結果となる)


<body>
 <div id="Page">

   ページのHTML構造

 </div>
</body>

----------------------------------------------
bodyはダメです、縦にスクロールできなくなる

#Page{
overflow:hidden;
}

エフェクト処理部分を大きくラップして、overflow:hidden しても除去出来ません。

HTML5ですから、全て、CSS3での処理を行えば良いが、色々混在しているので起きる現象と思います。画像処理のレーヤーが伸びているのでしょう。ブラウザの進化に伴い直るかは不明です....。


追記 /2017/01/14/

通常Body直下にwrapperがあることが多いので、そこにhidden処理するようです。このデモHTMLではwrapperがエフェクト処理部分以下に有りますので、#Pageにしました。
#Pageなど無い場合はjQueryで処理しても良い。(ID名は自由です)



//#Pageが無い場合Body直下をラップする
$("body").wrapInner('<div id="xxxxx"></div>');
//hidden
$('#xxxxx').css({'overflow':'hidden'});

//幅設定が必要ならば
$('#xxxxx').css({'width':'100%','overflow':'hidden'});

以上の観点から実際に構造を作ってみる。10種位作ってみて1番効率の良い形式を記載します。


実際のエフェクト処理サンプル3種

 

1. 画像は3-5枚位。(スマートフォンでの負荷が大きいので考慮しましょう)
2. CSS、JSの画像サイズ部分を書き換える。
3. 画像のパスは使用者の環境に合わせます。(下記例は当方の場合の例です)
4. 速度などを変更できます。
5. animate()、事前処理の変更は可能です。
6. モダンブラウザ以外で「画像読み込み済み」で無ければ処理しない面があるので1秒遅延した。
7. マスクする場合はCSSで大きさを設定する必要があります。(overflow:hidden)
8. より良い方法があれば、書き換える可能性があります。誰か考えてください。
(初めて作るが、CSS、JS共に参考にしたものは無い、全くの自作です、メンドウですね)
9. 世間一般では「プラグイン」使用が多いようです。
10. 本来ならば全てCSS3処理とは思いますが、まだ対応ブラウザが限定されます。
11. jQueryは「baserCMS.4.0.1」に収容の、jquery-1.11.3.min.js を使用しています。
12. IE10 9 8 7は「開発者ツール」で確認。(余りアテにならないかも...)


透明度とsrc

JS処理では、img要素のsrcに画像を入れる場合、透明度が 0 でも画像を入れれば 1 に成ります(初期化される)。
CSS3での透明度処理は以外と軽く(早く)なりましたが、必要な場合この辺を考慮して処理下さい。

下記は「模擬デモ10」のアニメ処理部分ですが、画像切り替えの場合に、エフェクトの種類などによっては多少の工夫が必要となる事もあります。考慮しなくとも良い場合もある。(処理の遅い環境も考慮して事前処理をする)


	//事前処理
	top_item.css({'left':pos_x*reversal,'top':0,'display':'none'}).css({'opacity':0});//移動
	top_item.children("img").attr({'src':image_urls[image_no]});//画像切り替え
	top_item.css({'display':'block'});

	//エフェクト
	top_item.animate({'left':0,'top':0,'opacity':1},fade_time,function(){
		//
	});

 

模擬デモ10、画像スライド付きTOPページ

「ul」「li」構造、最終テスト品。最もレスポンシブ的で多様性がある。

demo10

 

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

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

PC iphone ipad 或いは類似した機器等での表示例で、携帯(モバイル)には対応していません。PCで確認ください。



<div id="imageBox-wrap">
<div id="imageBox">
 <ul id="imagebox-inner">
  <li class="parts-wrap"><img src="/main/baserhtml/images/mainImage-01.jpg" /></li>
  <li class="parts-wrap"><img src="/main/baserhtml/images/mainImage-02.jpg" /></li>
  <li class="parts-wrap"><img src="/main/baserhtml/images/mainImage-03.jpg" /></li>
  <li class="parts-wrap"><img src="/main/baserhtml/images/mainImage-04.jpg" /></li>
  <li class="parts-wrap"><img src="/main/baserhtml/images/mainImage-05.jpg" /></li>
  <li class="parts-wrap"><img src="/main/baserhtml/images/mainImage-01.jpg" /></li>
 </ul>
</div>
</div>

サンプルJS CSS


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

/* maxWidthBox */
#imageBox-wrap{
width:100%;
height:auto;
padding:2px 0px;
text-align:center;
background-color:#f5f5f5;
}
#imageBox{
max-width:880px;
height:380px;
margin:0 auto;
padding:1px;
border:1px solid #d5d5d5;
overflow:hidden; /* 高さなしはNGの場合有り IE7は機能しない */
}
#imageBox #imagebox-inner{
position:relative;
width:100%;
height:auto;
}
#imagebox-inner .parts-wrap{
position:absolute;
top:0;left:0;
width:100%;
height:auto;
}
#imagebox-inner .parts-wrap img{
width:100%;
height:auto;
}


//pops-effectbox.js
//画像エフェクト1

(function($){

  $(function(){

    function init(){

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

	//スライド反転係数/1=右から -1=左から
	var reversal=1;
	//画像修正係数0.95-1.0
	img_rate=0.95;

	//時間
	var start_time=8000;
	var cycle_time=6000;
	var fade_time=1000;

	//オブジェクト
	var box_elm_wrap=$('#imageBox');
	var box_elm=$('#imagebox-inner');
	var img_elm=$('#imagebox-inner .parts-wrap');

	var img_len=img_elm.length;
	var image_max=img_len-1;
	var timerID=null;
	var image_no=0;
	var keep_no=0;
	var image_urls=[];
	var item_w;

	//幅取得
	var window_width=0;
	window_width=$(window).width();
	var pos_x=0;
	if(window_width<image_w){
		pos_x=window_width;
	}else{
		pos_x=image_w;
	};

	//一旦全てを消す/URL取得
	$('#imagebox-inner .parts-wrap').each(function(i){
		$(this).css({'z-index':i,'display':'none'});
		image_urls[i]=$(this).children("img").attr('src');
	});

	//display
	img_elm.eq(0).css({'display':'block'});
	//TOP-ITEM
	var top_item=img_elm.eq(img_len-1);
	//次の番号
	image_no=1;

	//スタート遅延
	setTimeout(function() {
		effectImage();
	},start_time);

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

		//事前処理
		top_item.css({'left':pos_x*reversal,'top':0,'display':'none'}).css({'opacity':0});//移動
		top_item.children("img").attr({'src':image_urls[image_no]});//画像切り替え
		top_item.css({'display':'block'});

		//エフェクト
		top_item.animate({'left':0,'top':0,'opacity':1},fade_time,function(){

			//階層処理
			img_elm.eq(image_no).css({'display':'block'});
			top_item.css({'display':'none'});
			img_elm.eq(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();

		//画像修正
		if(window_width<image_w){

			var w=window_width*img_rate;
			var hiritu=window_width/image_w*img_rate;
			var h=image_h*hiritu;

			//box_elm_wrap.css({'width':w,'height':h});
			box_elm_wrap.css({'height':h});

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

	}

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


    }//init end

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

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

  });

})(jQuery);

模擬デモ11、画像スライド付きTOPページ

「div」構造、最終テスト品。「模擬デモ10」を簡素化したものです。上記より多様性には欠ける。
形は変わってもリスト構造には違いない。

 

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

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

PC iphone ipad 或いは類似した機器等での表示例で、携帯(モバイル)には対応していません。PCで確認ください。



<div id="imageBox-wrap">
<div id="imageBox">
 <div id="imagebox-inner">
  <img class="parts-wrap" src="/main/baserhtml/images/mainImage-01.jpg" />
  <img class="parts-wrap" src="/main/baserhtml/images/mainImage-02.jpg" />
  <img class="parts-wrap" src="/main/baserhtml/images/mainImage-03.jpg" />
  <img class="parts-wrap" src="/main/baserhtml/images/mainImage-04.jpg" />
  <img class="parts-wrap" src="/main/baserhtml/images/mainImage-05.jpg" />
  <img class="parts-wrap" src="/main/baserhtml/images/mainImage-01.jpg" />
 </div>
</div>
</div>

サンプルJS CSS


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

/* maxWidthBox */
#imageBox-wrap{
width:100%;
height:auto;
padding:2px 0px;
background-color:#f5f5f5;
}
#imageBox{
max-width:880px;
height:380px;
margin:0 auto;
padding:1px;
border:1px solid #d5d5d5;
overflow:hidden; /* 高さなしはNGの場合有り IE7は機能しない */
}
#imageBox #imagebox-inner{
position:relative;
width:100%;
height:auto;
}
#imagebox-inner .parts-wrap{
position:absolute;
top:0;left:0;
width:100%;
height:auto;
}


//pops-effectbox2.js
//画像エフェクト2

(function($){

  $(function(){

    function init(){

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

	//スライド反転係数/1=右から -1=左から
	var reversal=1;
	//画像修正係数0.95-1.0
	img_rate=0.95;

	//時間
	var start_time=8000;
	var cycle_time=6000;
	var fade_time=1000;

	//オブジェクト
	var box_elm_wrap=$('#imageBox');
	var box_elm=$('#imagebox-inner');
	var img_elm=$('#imagebox-inner .parts-wrap');

	var img_len=img_elm.length;
	var image_max=img_len-1;
	var timerID=null;
	var image_no=0;
	var keep_no=0;
	var image_urls=[];
	var item_w;

	//幅取得
	var window_width=0;
	window_width=$(window).width();
	var pos_x=0;
	if(window_width<image_w){
		pos_x=window_width;
	}else{
		pos_x=image_w;
	};

	//一旦全てを消す/URL取得
	$('#imagebox-inner .parts-wrap').each(function(i){
		$(this).css({'z-index':i,'display':'none'});
		image_urls[i]=$(this).attr('src');
	});

	//display
	img_elm.eq(0).css({'display':'block'});
	//TOP-ITEM
	var top_item=img_elm.eq(img_len-1);
	//次の番号
	image_no=1;

	//スタート遅延
	setTimeout(function() {
		effectImage();
	},start_time);

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

		//事前処理
		top_item.css({'left':pos_x*reversal,'top':0,'opacity':0,'display':'none'});//移動
		top_item.attr({'src':image_urls[image_no]});//画像切り替え
		top_item.css({'display':'block'});

		//エフェクト
		top_item.animate({'left':0,'top':0,'opacity':1},fade_time,function(){

			//階層処理
			img_elm.eq(image_no).css({'display':'block'});
			top_item.css({'display':'none'});
			img_elm.eq(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();

		//画像修正
		if(window_width<image_w){

			var w=window_width*img_rate;
			var hiritu=window_width/image_w*img_rate;
			var h=image_h*hiritu;

			//box_elm_wrap.css({'width':w,'height':h});
			box_elm_wrap.css({'height':h});

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

	}

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


    }//init end

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

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

  });

})(jQuery);

模擬デモ12、画像スライド付きTOPページ2

「li」構造、連結式スライド、「エンドレスタイプ」に仕上げました、スライド方向は一定です。
画像を横に並べて全体をスライドしています。スライドの時間が長いと負荷が大きいるで注意ください。
1番目の画像を最後にも配置して「エンドレスタイプ」に処理しています。

demo12

 

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

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

PC iphone ipad 或いは類似した機器等での表示例で、携帯(モバイル)には対応していません。PCで確認ください。



<div id="imageBox-wrap">
<div id="imageBox">
 <ul id="imagebox-inner">
  <li class="parts-wrap"><img src="/main/baserhtml/images/mainImage-01.jpg" /></li>
  <li class="parts-wrap"><img src="/main/baserhtml/images/mainImage-02.jpg" /></li>
  <li class="parts-wrap"><img src="/main/baserhtml/images/mainImage-03.jpg" /></li>
  <li class="parts-wrap"><img src="/main/baserhtml/images/mainImage-04.jpg" /></li>
  <li class="parts-wrap"><img src="/main/baserhtml/images/mainImage-05.jpg" /></li>
  <li class="parts-wrap"><img src="/main/baserhtml/images/mainImage-01.jpg" /></li>
 </ul>
</div>
</div>

サンプルJS CSS


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

/* maxWidthBox */
#imageBox-wrap{
width:100%;
height:auto;
padding:2px 0px;
background-color:#f5f5f5;
}
#imageBox{
position:relative;
max-width:880px;
height:380px;
margin:0 auto;
padding:0;
overflow:hidden; /* 高さなしはNGの場合有り IE7は機能しない */
}
#imagebox-inner{
position:absolute;
top:0;left:0;
width:100%;
height:auto;
}
#imagebox-inner .parts-wrap{
position:absolute;
top:0;left:0;
width:100%;
height:auto;
}
#imagebox-inner .parts-wrap img{
width:100%;
height:auto;
}


//pops-effectbox3.js
//画像SLIDER、エンドレスタイプ

(function($){

  $(function(){

    function init(){

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

	//画像修正係数なし

	//時間
	var start_time=8000;
	var cycle_time=6000;
	var slide_time=800;//400-800

	//オブジェクト
	var box_elm_wrap=$('#imageBox');
	var box_elm=$('#imagebox-inner');
	var img_elm=$('#imagebox-inner .parts-wrap');

	var img_len=img_elm.length;
	var image_max=img_len;
	var timerID=null;
	var image_no=0;
	var keep_no=0;
	var image_urls=[];
	var item_w;
	var pos_x=0;

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

	//次の番号
	image_no=1;

	//スタート遅延
	setTimeout(function() {
		effectImage();
	},start_time);

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

		var pos_v=image_no*pos_x*-1;
		//エフェクト
		box_elm.animate({'left':pos_v,'top':0},slide_time,function(){

			//最後なら
			if(image_no == image_max-1){
				box_elm.css({'left':0,'top':0});
			}

			//処理番号保存
			keep_no=image_no;
			set_timer();

		});

	}

	//次ぎの開く要素を計算
	function next_set() {

		//次ぎの番号
		image_no +=1;
		if (image_no > (image_max-1)) {image_no=1;}
		effectImage();

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

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

	}

	//ラップの大きさを修正
	//window-resize
	$(window).resize(resizeFunc);

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

		window_width=$(window).width();

		if(window_width<image_w){
			pos_x=window_width;
		}else{
			pos_x=image_w;
		};

		//横に並べる
		$('#imagebox-inner .parts-wrap').each(function(i){
			$(this).css({'left':pos_x*i,'top':0});
		});
		//スライダー位置調整
		var pos_v=image_no*pos_x*-1;
		box_elm.css({'left':pos_v,'top':0});


		//画像修正
		if(window_width<image_w){

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

			//box_elm_wrap.css({'width':w,'height':h});
			box_elm_wrap.css({'height':h});

		}else{

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

	}

    }//init end

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

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

  });

})(jQuery);

模擬デモ13、画像スライド付きTOPページ3 (追加)

「li」構造、連結式スライドは上の例と同じだが、li要素をposition:relative設定、floatで横に並べています。単純な構成にしましたが、上のデモのようにも書き替えなどは可能です。
上の「模擬デモ12」との違いに注意ください。2017/02/01/追加しました。

demo27

 

1. ul要素はliを横に並べるため、position:absolute です。カラム落ちしない様に長さが重要に成ります。
2. li要素はposition:relative でfloatさせます。ul要素の幅があれば、常に横並びになります。
(模擬デモ12はabsoluteなので、ul要素の幅は余り関係が無い決定的相違がある)
3. max-widthはli要素に設定します。ここが違うところです。
4. 但し、画像は常に大きさを設定しなければ成りません。自動計算表示では無い点に注意。
5. 全体をスライド移動するには常に(window幅が変わった場合)、li要素(画像)の位置を計算しなければなりません。
6. 通常のリストの並べ方とほぼ同じですから。多少理解し易いのではないでしょうか。
(構成が単純であるが、全体のスライド以外の変化は難しいかも知れない)
7. 実際には、a-linkを組み込み利用する場合が多いかと思います。
8. 実際の画像の50%で表示しています。

 

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

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

PC iphone ipad 或いは類似した機器等での表示例で、携帯(モバイル)には対応していません。PCで確認ください。



<div id="sliderBox">
 <ul id="sliderBase">
  <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>

サンプルJS CSS


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

/* 本体 */
#sliderBox{
position:relative;
width:440px;
height:190px;
margin:0 auto;
padding:0;
background-color:#000000;
overflow:hidden; /*MASK*/
}
#sliderBase{
position:absolute;
top:0;left:0;
width:440px;/*暫定*/
height:auto;
margin:0;
padding:0;
}
#sliderBase li{
list-style:none;
position:relative;
max-width:440px;
height:auto;
margin:0;
padding:0;
float:left;
}

#sliderBase li img{
width:100%;
height:auto;
margin:0;
padding:0;
}

/* 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;
}


//simple-slider3.js
//画像slider、通常処理形式
//コントロールspan構成/a-linkつき
//IE7のみ横スクロールでる

(function($){

  $(function(){

    function init(){

	//画像の大きさ
	var image_w=440;
	var image_h=190;

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

	//BTNグループの使用
	var hitbtn_use=true;

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

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

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

	var width_v=image_w;
	var height_v=image_h;
	var keep_w=image_w;

	//URL取得
	$('#sliderBase').find('li').each(function(i){
		//仮位置
		var posxs=width_v*i;
		slide_pos[i]=posxs;//位置保存
		slideelm[i]=img_elm.eq(i);//オブジェクト保存
		image_urls[i]=$(this).find("a").children("img").attr('src');//URL保存
	});


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

		//後ろにappendする
		$('#sliderBox').after('<div id="btnBox"></div>');
		var mark="●";
		//make-btn
		var btnhtml="";
		for (var i=0; i < image_max; i++) {
			//ID
			var name="hitbtn"+i;
			btnhtml += '<span id="' + name +'">' + mark + '</span>';
		}
		//append #top-box
 		$('#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に
		hit_btns[0].addClass('active');

	}

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

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


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

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

		if(hitbtn_use){
			hit_btns[keep_no].removeClass('active');
		}

		var pos_x=width_v*image_no;

		//エフェクト
		box_elm.animate({'left':-pos_x},slide_time,function(){

			//処理番号保存
			keep_no=image_no;
			animeflag=false;
			slideflag=true;

			if(hitbtn_use){
				hit_btns[image_no].addClass('active');
			}

			set_timer();

		});

	}

	//次ぎの開く要素を計算
	function next_set() {

		slideflag=true;
		//次ぎの番号
		image_no +=1;
		if (image_no > (image_max-1)) {image_no=0;}
		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 hiritu=window_width/image_w;
			var h=image_h*hiritu;
			var ul_w=w*image_max;

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

			box_elm_wrap.css({'height':h});
			box_elm.css({'width':ul_w,'height':h});

			//画像幅位置修正
			chg_pos(width_v);

		}else{

			var ul_w=image_w*image_max;
			//現在の大きさ
			width_v=image_w;
			height_v=image_h;

			box_elm_wrap.css({'height':image_h});
			box_elm.css({'width':ul_w,'height':image_h});

			//画像幅位置修正
			chg_pos(width_v);

		}

	}

	//画像幅位置修正
	function chg_pos(w_v){
		//幅変更がなければ実行しない
		if(keep_w==w_v){return}
		//処理
		var maxlen=image_max;
		//移動位置再計算
		for (var i=0; i < maxlen; i++) {
			slide_pos[i]=w_v*i;
			slideelm[i].find("img").css({'width':w_v});//画像幅
		}
		//現在番号位置にBaseをセット、動いた場合の修正
		var psx_v=slide_pos[keep_no]*-1;
		box_elm.css({'left':psx_v});
		keep_w=w_v;
	}

    }//init end

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

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

  });

})(jQuery);


使用画像

原則、使用者が用意します。: サンプルでの使用画像




【参照】当方の記事: baserCMS4.0系をローカルにインストールする

【参照】当方の記事: baserCMS4.0系 レスポンシブデザインのテーマ制作1

【参照】当方の記事: baserCMS4.0系 レスポンシブデザインのテーマ制作2

【参照】当方の記事: baserCMS4.0系 TOP画像のレスポンシブ表示


 

簡単ですが、以上です。

 


[ この記事のURL ]


タグ:basercms4 , html5

 

ブログ記事一覧

年別アーカイブ一覧



[1]