簡易ホリゾンタル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 ]