POPSブログ

簡易ホリゾンタルPHOTO-SLIDER

35

  Category:  jquery2012/02/25 pops 

簡易ホリゾンタルPHOTO-SLIDER、シームレス&エンドレス、簡易スライダーです。


簡易ホリゾンタルPHOTO-SLIDER

pops-hslider.js pops-hslider.css

ホリゾンタルPHOTO-SLIDER スライドサンプル表示



HTML構造を直接書きます。

  • シームレス&エンドレス、簡易スライダー
  • 簡易記述方式のJSです。読み込めば直ぐ実行します。
  • サイクルタイムは、JSで2種設定できます。書き換えてください。
    (スタートまでの時間、サイクル、スライドの時間など、画像の大きさ状況にあわせる)
  • 画像は個人で、3-5枚用意ください。画像の大きさは全て同一になります。
  • 画像の大きさで、CSSをも変更ください。
  • TOPページ用途です。複数の設置は原則できません。
  • IE8では能力が無くキレイに移動できないようです。Google Chromeをご利用ください。

簡単な動作の説明

説明図


ポジション固定式ですのでカラム落ちなどありません。画像の入った要素を横に並べて、各々のポジションに移動しているだけの簡単なものです。(全ての画像すなわち、UL要素をマイナス方向にアニメ移動している)
反対方向に移動、または縦方向に移動するにも改造は簡単に出来ると思います。画像の大きさにもよりますが、現在の大きさですと、10枚程度までがキレイに見られるようです。


設置方法

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


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


<div id="pops_horizontal_slide">
	<ul id="slide_base">
		<li><img src="/main/images/photo_m1.jpg" /></li>
		<li><img src="/main/images/photo_m2.jpg" /></li>
		<li><img src="/main/images/photo_m3.jpg" /></li>
		<li><img src="/main/images/photo_m4.jpg" /></li>
		<li><img src="/main/images/photo_m1.jpg" /></li>
	</ul>
</div>
<br style="clear:both;" />

注意、最初の画像を、最後にも記載してください。エンドレスのために、1つ多くなります。
状況に応じてclear:bothを入れてください。


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


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

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

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

JS CSS

JS pops-hslider.js
最初の画像が表示されます。「スタートタイム」に達したら次の画像を表示します。以後「サイクル時間」で繰り返します。
画像が表示されない場合は、画像のパスを確認ください。


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

(function($){

	$(function(){

		var item_elm = $('#pops_horizontal_slide');
		var item_base = $('#slide_base');

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

		//要素の数
		var list_len=$('#slide_base li').length;

		//WH要素の1番目の大きさ取得
		var item_W=$('#slide_base li').eq(0).width();
		var item_H=$('#slide_base li').eq(0).height();
		//外枠に変更があった場合は手書きで設定する
		//item_W=640;
		//item_H=200;

		var all_width=list_len*item_W;
		$('#slide_base').css({'width':all_width});

		var i=0;
		$('#slide_base li').each(function(i){
			var pos_x=i*item_W;
			$(this).css({'top':0,'left':pos_x});
			i ++;
		});

		var count = 0;

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

		//slideImage関数
		function slideImage (){

			//マイナス方向
			var s_x=count*item_W*-1;
			//top-slideスライドアニメ実行
			item_base.animate({'left':s_x},slide_time,function(){

				//こちらで0番に修正
				if (count == list_len-1) {item_base.css({'left':0});count = 0;}
				//カウントアップ
				count++;

				//現在機能していない
				if (count > list_len-1) {count = 0;}

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

		};

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

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

	});

})(jQuery);

簡単なJSの説明



li要素のポジションの固定、まれに隙がでる場合があるので position:absolute に修正
しています、リストを並べるだけなら削除も可能
CSSの position:absolute; top:0;left:0; も削除する

var i=0;
$('#slide_base li').each(function(i){
	var pos_x=i*item_W;
	$(this).css({'top':0,'left':pos_x});
	i ++;
});

ポジションの固定をしたほうが、クロスブラウザに有利なので、position:absolute
にしている理由です、JSでの処理が多くなるが、問題が出難くくなる

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

ごまかしエンドレスの仕組み、

画像が最終(最初の画像を表示している)になったら強制的にCSSで最初に戻す、
(CSS瞬間移動です、アニメでは無い、アニメでも時間を1にすれば可能だが一瞬他の画像を
表示する可能性が高い、CSSを使用するほうが無難である)

これを削除すれば、アニメで最初に逆戻りします、
if (count == list_len-1) {item_base.css({'left':0});count = 0;}

現在は機能していない
if (count > list_len-1) {count = 0;}

が有効になります

その場合最後の画像である
<li><img src="/main/images/photo_m1.jpg" /></li>

もいらないことになります

CSS pops-hslider.css


/* pops-hslider.css 日本語*/

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

#pops_horizontal_slide #slide_base {
display:block;
position:absolute;
top:0;left:0;
width:auto;
height:200px;
margin:0;
padding:0;
background:none;
}

#pops_horizontal_slide #slide_base li {
display:inline;
position:absolute;
top:0;left:0;
list-style:none;
width:640px;
height:200px;
margin:0;
padding:0;
border:0;
float:left;
}
#pops_horizontal_slide #slide_base img {
width:100%;
height:100%;
margin:0;
padding:0;
border:0;
}

以上です。



[ この記事のURL ]


タグ:Effect , Slider , jquery , photo

 

ブログ記事一覧

年別アーカイブ一覧



[1]