POPSブログ

簡易PHOTO-SLIDER

34

  Category:  jquery2012/02/25 pops 

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


簡易PHOTO-SLIDER

pops-slidephoto.js pops-slidephoto.css

PHOTO-SLIDER スライドサンプル表示



HTML構造を直接書きますが、画像はJS側スクリプトに記述します。

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

簡単な動作の説明

説明図


画像を上層、下層に分けて、上層をスライドしています、各ポジションを配列に保存しておきランダムに取り出して設定します。その 後は、ポジション 0.0 を目指してアニメ処理をすればよい訳です。単なるスライド処理ならば、幅高さのアニメ処理はいりません。8、9 番が幅高さのアニメ処理を必要とするので、幅高さの処理をもしています。
ここではINタイプの処理ですが、OUT処理も可能です。



//slideImage関数
function slideImage (){

	ランダムな番号を与える、ランダム指定なき場合はslide_noを実行する

	//random-No
	if (slide_type == 'random') {
		slide_no=Math.floor(Math.random() * 10);
	}

	スライド画像のポジション値を取得

	//postion
	pos_x=pos_Xs[slide_no];
	pos_y=pos_Ys[slide_no];
	//WH
	var slide_W=item_W;
	var slide_H=item_H;
	if (slide_no == 8) {slide_H=0;}
	if (slide_no == 9) {slide_W=0;}

	//INタイプ、OUTはない
	//imgタグに入れる、URL取得
	cross_url = path+preloaddata[count];
	//上層移動とURLの代入 まだ非表示
	item_top.css({'top':pos_y,'left':pos_x,'width':slide_W,'height':slide_H,'display':'none'});
	item_top.children("img").empty().attr({'src':cross_url});
	//表示する、但し画面の外側にある
	item_top.css({'display':'block'});

	//top-slideスライドアニメ実行、アニメで基準ポジション 0.0 をめざす
	item_top.animate({'top':0,'left':0,'width':item_W,'height':item_H},slide_time,function(){

		アニメ終了後、下層に新しいURLを代入して画像を表示させる

		//下層、画像すり替え操作
		item_img.children("img").attr({'src':cross_url});
		//上層をけす
		item_top.css({'display':'none'});
		//カウントアップ
		count++;
		if (count > list_len-1) {count = 0;}

		setTimeoutでサイクルタイムを与える

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

};

これはINの場合の処理であるがOUTを設定する場合は、OUTは反対の動きですから、
IN OUT の条件で初期のCSS、ポジション、大きさなど、別変数に代入するなどして、旨くすり変える
当然、上層下層のセットする画像も違ってきますが、処理可能です

画像をHTML側に書く方式ですと Safari で旨く行きません(画像非表示で読み込まなくなったようだ。Operaもここ注意だ)。そのため画 像をJSに登録して、プリロード形式にしました。

プリロードの場合、Internet Explorer (7 8)では、 [プロパティ]-[設定]-[ファイルの表示] で確認できます。


設置方法

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


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


<div id="pops-slidephoto">
	<div id="slidebase">
		<div id="imgholder"><img /></div>
		<div id="slidetop"><img /></div>
	</div>
</div>

注意、構造だけの記載です。画像はJSに登録します。


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


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

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

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

JS CSS

JS pops-slidephoto.js 通常方式
最初の画像が表示されます。「スタートタイム」に達したら次の画像を表示します。以後「サイクル時間」で繰り返します。
画像読み込みに失敗した場合、「正常にスライドイン」しないことがあります。


//pops-slidephoto.js
//setTimeout 通常方式
//画像までのパス、画像名を登録する、スライドの種類、時間を変更する
//POPS WEB KOUBOU

(function($){

	$(function(){

		var item_elm = $('#pops-slidephoto');
		var item_base = $('#slidebase');
		var item_img = $('#imgholder');
		var item_top = $('#slidetop').css({'display':'none'});

		var cycle_time_main = 12000;//スタートまでの時間、5000以上 
		var cycle_time = 8000;//サイクル 5000以上
		var slide_time = 800;//フェード時間 400-1000
		var cross_url = "";
		var keep_url = "";

		//スライド番号、random表示しない場合使用される
		var slide_no=3;//3
		//random表示にするか random の場合だけ、他の文字では実行しない
		var slide_type='random';//random
		//画像までのパス
		var path='/main/images/';
		//画像名を登録する
		var preloaddata=['photo_m1.jpg','photo_m2.jpg','photo_m3.jpg','photo_m4.jpg'];
		//
		var preload=[];
		image_preload();
		var list_len=preloaddata.length;

		//WH
		var item_W=item_base.width();
		var item_H=item_base.height();
		//postion 10種、最後は原点
		var pos_x=item_W;
		var pos_y=0;
		var pos_Xs=[-item_W,0,item_W,item_W,item_W,0,-item_W,-item_W,0,item_W/2,0];
		var pos_Ys=[-item_H,-item_H,-item_H,0,item_H,item_H,item_H,0,item_H/2,0,0];

		var count = 0;

		//最初の画像を下層にセット
		keep_url=path+preloaddata[count];
		item_img.children("img").attr({'src':keep_url});

		//次ぎの画像の番号セット
		count = 1;

		//slideImage関数
		function slideImage (){

			//random-No
			if (slide_type == 'random') {
				slide_no=Math.floor(Math.random() * 10);
			}
			//postion
			pos_x=pos_Xs[slide_no];
			pos_y=pos_Ys[slide_no];
			//WH
			var slide_W=item_W;
			var slide_H=item_H;
			if (slide_no == 8) {slide_H=0;}
			if (slide_no == 9) {slide_W=0;}

			//INタイプ、OUTはない
			//imgタグに入れる、URL取得
			cross_url = path+preloaddata[count];
			//上層移動とURLの代入
			item_top.css({'top':pos_y,'left':pos_x,'width':slide_W,'height':slide_H,'display':'none'});
			item_top.children("img").empty().attr({'src':cross_url});
			item_top.css({'display':'block'});

			//top-slideスライドアニメ実行
			item_top.animate({'top':0,'left':0,'width':item_W,'height':item_H},slide_time,function(){

				//下層、画像すり替え操作
				item_img.children("img").attr({'src':cross_url});
				//上層をけす
				item_top.css({'display':'none'});
				//カウントアップ
				count++;
				if (count > list_len-1) {count = 0;}

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

		};

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

		//image-preload
		function image_preload() {
			//image
			for (var i = 0; i < preloaddata.length; i++) {
				preload[i] = new Image();
				preload[i].src = path + preloaddata[i];
			}
		}

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

	});

})(jQuery);

CSS pops-slidephoto.css


/* pops-slidephoto.css */

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

#pops-slidephoto #slidebase {
	position:absolute;
	top:0;left:0;
	width:640px;
	height:200px;
	background-color:#000000;
	overflow:hidden;
}

#imgholder {
	position:absolute;
	top:0;left:0;
	width:640px;
	height:200px;
}

#slidetop {
	display:block;
	position:absolute;
	top:0;left:0;
	width:640px;
	height:200px;
	padding:0;
	margin:0;
	border:0;
}
#slidetop img {
	width:100%;
	height:100%;
	padding:0;
	margin:0;
	border:0;
}

以上です。



[ この記事のURL ]


タグ:Effect , Slider , jquery , photo

 

ブログ記事一覧

年別アーカイブ一覧



[1]