POPSブログ

簡易DOUBLE-SLIDER

37

  Category:  jquery2012/02/28 pops 

簡易DOUBLE-SLIDER、簡単な画像ダブルスライドです。


簡易DOUBLE-SLIDER

pops-w-slide.js pops-w-slide.css

ダブルスライド、サンプル表示



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

  • 簡易記述方式のJSです。読み込めば直ぐ実行します。
  • サイクルタイムは、JSで2種設定できます。書き換えてください。
    (スタートまでの時間、サイクル、スライドの時間など、画像の大きさ状況にあわせる)
  • 画像は個人で、5-10枚用意ください。
  • 画像名、画像までのパスはJSに記載します、随時ロード形式です。
    (その都度、画像をロードしますので、画像転送量を少し抑えることができます)
  • 画像の大きさで、CSSをも変更ください。
  • TOPページ用途です。複数の設置は原則できません。
  • IE8 はキレイに動作しません。Google Chrome を利用ください。

簡単な動作の説明

説明図


画像を上層、下層に分けて、上層をスライドしています、各ポジションを配列に保存しておきランダムに取り出して設定します。上層のスライドが終了したら、下層に新しい画像をセットして、上層を消します。
画像単独でアニメした場合は隙がでます。ダブルスライドさせるため画像2枚を組にしてスライドします。スクリプトが多い割りにはスライドの種類が4種と少ない面倒なスライドタイプです。
よって、他のスライド、スライスなどのエフェクトと組み合わせる事も可能です。


設置方法

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


[ HTML構造を作る ]
以下のように構造を作ってください。ID は #pops_wslide です。
1枚目の画像を HTML、#image_holder に記載してください。


<div id="pops_wslide">
	<div id="wslide_base">
		<div id="image_holder"><img src="/main/images/photo_m1.jpg" width="640" height="200" /></div>
		<div id="image_slide"><div id="slide_img1"><img /></div><div id="slide_img2"><img /></div></div>
	</div>
	<div id="wslide_loading"></div>
	<div id="wslide_text"></div>
</div>

注意、構造および、1枚目の画像の記載です。全画像はJSに登録します。


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


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

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

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

JS、CSS、Loading画像

JS pops-w-slide.js 通常方式


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

(function($){

	$(function(){

		var item_elm = $('#pops_wslide');
		var item_img = $('#image_holder');
		var item_base = $('#wslide_base');
		var item_top = $('#image_slide');
		var topimg1=$('#slide_img1');
		var topimg2=$('#slide_img2');
		var loading=$('#wslide_loading');

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

		//TEXT表示
		var text_use="";//use

		//スライド番号、random表示しない場合使用される
		var slide_no=0;//0-3
		//random表示にするか random の場合だけ、他の文字では実行しない
		var slide_type='random';//random

		//画像までのパス
		var path='/main/images/';
		//画像名を登録する
		var img_urls=['photo_m1.jpg','photo_m2.jpg','photo_m3.jpg','photo_m4.jpg'];

		var list_len=img_urls.length;

		//WHの取得
		var item_W=item_base.width();
		var item_H=item_base.height();
		//postion 4種
		var pos_x=0;
		var pos_y=0;

		//TOPBOX欄外に移動
		item_top.css({'top':0,'left':item_W});
		//loading-Set
		loading.css({'width':item_W,'height':item_H,'display':'none'});

		//TOPBOX移動前原点
		var top_pos_X=[0,-item_W,0,0];
		var top_pos_Y=[0,0,-item_H,0];

		//TOPBOX大きさwbox WH
		var top_box_W=[item_W*2,item_W*2,item_W,item_W];
		var top_box_H=[item_H,item_H,item_H*2,item_H*2];
		//移動先move-pos
		var mv_pos_X=[-item_W,0,0,0];
		var mv_pos_Y=[0,0,0,-item_H];

		//img-pos1/INNER画像BOX1
		var img_pos_X1=[0,item_W,0,0];
		var img_pos_X2=[item_W,0,0,0];
		//img-pos2/INNER画像BOX1
		var img_pos_Y1=[0,0,item_H,0];
		var img_pos_Y2=[0,0,0,item_H];

		var count = 0;

		//INNER画像BOX1.2大きさ決定
		topimg1.css({'width':item_W,'height':item_H});
		topimg2.css({'width':item_W,'height':item_H});

		//最初の画像を下層にセット
		keep_url=path+img_urls[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() * 4);
			}

			var text="SlideNo: " + slide_no + " /URL "+ load_url + "";
			set_text(text);

			//INNER画像BOX1.2の位置決定
			topimg1.css({'top':img_pos_Y1[slide_no],'left':img_pos_X1[slide_no]});
			topimg2.css({'top':img_pos_Y2[slide_no],'left':img_pos_X2[slide_no]});

			//INタイプ、OUTはない
			//上層移動とURLの代入
			item_top.css({'top':top_pos_Y[slide_no],'left':top_pos_X[slide_no],'width':top_box_W[slide_no],'height':top_box_H[slide_no],'display':'block'});
			//no1
			topimg1.children("img").empty().attr({'src':keep_url});
			//no2
			topimg2.children("img").empty().attr({'src':load_url});
			item_top.css({'display':'block'});

			//top-slideスライドアニメ実行
			item_top.animate({'top':mv_pos_Y[slide_no],'left':mv_pos_X[slide_no]},slide_time,function(){

				//下層、画像すり替え操作
				item_img.children("img").attr({'src':load_url});
				//上層をけす
				item_top.css({'display':'block'});
				//keep-url
				keep_url=load_url;
				//cycle-time
				setTimeout(nextImage,cycle_time);
			});

		};

		//NEXT
		function nextImage() {
			//カウントアップ
			count++;
			if (count > list_len-1) {count = 0;}
			//imgタグに入れる、URL取得
			load_url = path+img_urls[count];
			imgload ();
		}

		//imgPreloader
		var imgload = function() {
			//loading
			loading.css({'display':'block'});
			//set-imgPreloader
			imgPreloader = new Image();
			//onload
			imgPreloader.onload = function() {
				//loading
				loading.css({'display':'none'});
				slideImage();
			}
			//url
			imgPreloader.src = load_url;
		}

		//set-text
		function set_text(text) {
			if (text_use == 'use') {
				$('#wslide_text').text(text);
			}
		}

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

	});

})(jQuery);

Loading画像 31x31



CSS pops-w-slide.css


/* pops-w-slide.css 日本語*/

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

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

#image_holder img{
width:100%;
height:100%;
margin:0;
padding:0;
border:0;
}

#wslide_base {
display:block;
position:absolute;
top:0;left:0;
width:640px;
height:200px;
margin:0;
padding:0;
background:none;
overflow:hidden;
}

#image_slide {
display:none;
position:absolute;
top:0;left:0;
width:640px;
height:200px;
margin:0;
padding:0;
border:0;
}
#slide_img1,#slide_img2{
display:block;
position:absolute;
top:0;left:0;
width:640px;
height:200px;
border:0;
}
#slide_img1 img,#slide_img2 img {
width:100%;
height:100%;
border:0;
}

#pops_wslide #wslide_loading {
display: block;
position:absolute;
top:0;left:0;
border:0;
background: url("/main/images/loading.gif") no-repeat center center;
background-color: none;/*Safari*/
}
#pops_wslide #wslide_text {
display: block;
position:absolute;
top:0;left:0;
width:100%;
height:20px;
color:#FF0000;
}

【参考】別形式DOUBLE-SLIDER: 簡易DOUBLE-SLIDER2


以上です。



[ この記事のURL ]


タグ:jquery , Slider , Effect , photo

 

ブログ記事一覧

年別アーカイブ一覧



[1]