POPSブログ

簡易PHOTO-FADER

33

  Category:  jquery2012/02/24 pops 

TOPページ用途の、jQueryでつくる、画像簡易PHOTO-FADER です。


簡易PHOTO-FADER

pops-photofader.js pops-photofader.css

PHOTO-FADER サンプル表示


 

HTML構造を直接書く方式です。画像の少ない場合に簡単に記述できます。画像を同じ位置に重ねますが、一瞬全部の画像が表示される場 合があるのが欠点です。
そのために、JSで最初は見えないように処理しています。

重要、最後に画像なしの li 要素を余計に書き込みます。クロスフェードの上の層になります。
画像LOADのエラー処理など行っていませんので、URLを確実に記入ください。間違っていればその画像は表示されません。


  • 簡易記述方式のJSです。読み込めば直ぐ実行します。
  • サイクルタイムは、JSで2種設定できます。書き換えてください。
    (スタートまでの時間、サイクル、フェードの時間など、画像の大きさ状況にあわせる)
  • 画像は個人で、3-5枚用意ください。
  • 画像の大きさで、CSSをも変更ください。
  • TOPページ用途です。複数の設置は原則できません。

設置方法

簡易JS記述、間違いの少ない、setTimeout の通常方式で記述しています。当方のTOPページのJSとは少し違いますので混同しないで ください。
なお、設置するページが違えば、別画像ででも使用できますが、画像の大きさが違えば別のCSS名で新たに作ってリンクしてください。


[ HTML構造を作る ]
以下のように構造を作ってください。ID は #pops-photofaderです。


<div id="pops-photofader">
	<ul>
	<li><img src="/main/images/photo_m1.jpg" width="640" height="200" /></li>
	<li><img src="/main/images/photo_m2.jpg" width="640" height="200" /></li>
	<li><img src="/main/images/photo_m3.jpg" width="640" height="200" /></li>
	<li><img src="/main/images/photo_m4.jpg" width="640" height="200" /></li>
	<li><img src="" width="640" height="200" /></li>
	</ul>
</div>
<div style="clear:both;"> </div>
<br />

最後に画像なしの li を必ず書いてください。画像パスなどはBaserCMS /main/ の場合の表記例です、環境に合わせてくだ さい。ID名、JS、CSS名等は自由に変更されても結構です。JSに「ID名」を使用している箇所が1つありますので、注意。


[ 使用方法 ]、JSを読み込むだけで実行します。またHEAD部分に直接記述しても実行します。
特別な書き方をしていませんので、jquery1.4以降位ならば全てのバージョンで作動すると思います。


読み出す場合
<link rel="stylesheet" type="text/css" href="/main/css/pops-photofader.css" />
<script type="text/javascript" src="/main/js/jquery.js"></script>
<script type="text/javascript" src="/main/js/pops-photofader.js"></script>

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

HEAD部分に直接記述する場合
<script type="text/javascript">
	ここにJS部分を直接記述
</script>

JS CSS

JS pops-photofader.js 通常方式
最初の画像が「フェードイン」します。「スタートタイム」に達したら次の画像を表示します。以後「サイクル時間」で繰り返します。
簡易形式の処理ですから、画像読み込みに時間がかかる場合、最初画像が「フェードイン」しないことがあります。


//pops-photofader.js
//setTimeout 通常方式
//POPS WEB KOUBOU

(function($){

	$(function(){

		var lis_elm = $('#pops-photofader ul li').hide();
		var lis_len = lis_elm.length;
		var cycle_time_main = 12000;//スタートまでの時間、5000以上 
		var cycle_time = 8000;//サイクル 5000以上
		var fade_time = 800;//フェード時間 400-1000
		var cross_url = "";
		//ITEM-BOX
		var top_item = lis_elm.eq(lis_len-1);
		//none
		top_item.css({'display':'none'});
		//fast-image-show
		lis_elm.eq(0).fadeIn(fade_time);
		var i = 1;

		//Main-fadeImage//roop
		function fadeImage (){

			//IN
			cross_url = lis_elm.eq(i).children("img").attr('src');
			top_item.css({'display':'none'});
			top_item.children("img").empty().attr({'src':cross_url});
			//top-fadeIn
			top_item.fadeIn(fade_time,function(){
				lis_elm.eq(i).show(1).siblings('li:visible').hide(1);
				i++;
				if (i > lis_len-2) {i = 0;}

				//cycle-time
				setTimeout(nextImage,cycle_time);
			});
		};

		//NEXT
		function nextImage() {
			fadeImage ();
		}

		//START Main-timer-set
		window.setTimeout(fadeImage,cycle_time_main);

	});

})(jQuery);

CSS pops-photofader.css


/* pops-photofader.css */

#pops-photofader {
display:block;
position:relative;
width:640px;
height:200px;
text-align:left;
background-color:#000000;
overflow:hidden;
}

#pops-photofader ul{
position:relative;
width:640px;
height:200px;
margin:0;
padding:0;
background-color:#000000;
}

#pops-photofader ul li {
display:none;
position:absolute;
top:0;left:0;
float:left;
list-style:none;
margin:0;
padding:0;
overflow:hidden;
}
#pops-photofader ul li img {
margin:0;
}


参考、回帰roop方式で書いた場合
少し難しい書き方、(function displayImages(){....}) の中がループになっている。同一の繰り返しの場合、簡素に書ける。


//pops-photofader.js
//setTimeout roop方式
//POPS WEB KOUBOU

(function($){
	$(function(){

		var lis_elm = $('#pops-photofader ul li').hide();
		var lis_len = lis_elm.length;
		var cycle_time_main = 12000;
		var cycle_time = 8000;
		var fade_time = 800;
		var cross_url = "";
		//ITEM-BOX
		var top_item = lis_elm.eq(lis_len-1);
		//none
		top_item.css({'display':'none'});
		//fast-image-show
		lis_elm.eq(0).fadeIn(fade_time);
		var i = 1;

		//Main-fadeImage
		function fadeImage (){

			//roop
			(function displayImages(){

				//IN
				cross_url = lis_elm.eq(i).children("img").attr('src');
				top_item.css({'display':'none'});
				top_item.children("img").empty().attr({'src':cross_url});
				//top-fadeIn
				top_item.fadeIn(fade_time,function(){
					lis_elm.eq(i).show(1).siblings('li:visible').hide(1);
					i++;
					if (i > lis_len-2) {i = 0;}

					//cycle-time
					setTimeout(function(){
						displayImages();
					}, cycle_time);
				});
			})();
		};

		//Main-timer
		window.setTimeout(function(){
			fadeImage();
		}, cycle_time_main);
	});
})(jQuery);

以上です。



[ この記事のURL ]


タグ:photo , Effect , jquery

 

ブログ記事一覧

年別アーカイブ一覧



[1]