POPS WEB

簡易ホリゾンタルPHOTO-SLIDER

pops-hslider.js pops-hslider.css

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

HTML構造を直接書きます。

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

簡単な動作の説明

説明図

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

設置方法

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

[ 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);

簡単なＪＳの説明

li要素のポジションの固定、まれに隙がでる場合があるので position:absolute に修正
しています、リストを並べるだけなら削除も可能
ＣＳＳの 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
にしている理由です、ＪＳでの処理が多くなるが、問題が出難くくなる

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

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

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

これを削除すれば、アニメで最初に逆戻りします、
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;
}

以上です。