本当にスライドだけがしたい場合の jQuery のコードを書いてみました。
ul と li で画像を並べるだけで、勝手にスライドが始まります。
simpleslide.js デモサイト
ただし、作った私は Javascript 初心者なのであしからず。
基本的な使い方
HTML の書き方
以下のようにスライドしたい画像を並べます。
CSS は必要ありません、きっと simpleslide.js が自動で設定してくれます。
id を slide にしておきますと、後々便利ですが、任意の名前でも結構です。
1 2 3 4 5 | <ul id="slide"> <li><img src="image_01.png"></li> <li><img src="image_02.png"></li> <li><img src="image_03.png"></li> </ul> |
JS の読み込み
simpleSlide() で起動します。 ページ末端に以下のようにコードを追加してください。
HTML の段階で、id 名に slide を設定した場合は simpleSlide() と空で OK です。
1 2 | <script type='text/javascript' src='jquery.simpleslide.js'></script> <script type='text/javascript'>simpleSlide();</script> |
※これだけで動かない場合は以下を読み進めてください…。
堅実な使い方
以上の手順だけで動くには動きますが、全自動すぎて不具合が発生することがありますので、以下の項目を設定することをおすすめします。
ID 名を指定する
HTML の段階で任意の id 名をいれた場合は、第1引数にあなたが設定した id 名を入れます。
1 2 | <script type='text/javascript' src='jquery.simpleslide.js'></script> <script type='text/javascript'>simpleSlide('hoge');</script> |
速度の設定
ちなみにスライドする速度を変更できます。
第2引数にミリ秒でスライドとスライドの間隔を入れます。
1 2 | <script type='text/javascript' src='jquery.simpleslide.js'></script> <script type='text/javascript'>simpleSlide('hoge', 3000);</script> |
枠のサイズ設定
さらに細かい設定ですが、横幅と高さを設定することができます。
要はフレーム枠のサイズです。
1 2 | <script type='text/javascript' src='jquery.simpleslide.js'></script> <script type='text/javascript'>simpleSlide('hoge', 3000, 500, 300);</script> |
第3引数が width、第4引数は height を設定します。
ここを設定しなければ、simpleslide.js が ul の初出の子要素のサイズを取得して、それを width と height として使用します。ですが、少し不調なので、挑戦者以外は設定してください。
ダウンロードはこちら： jquery.simpleslide.js (v1.0)
コード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | jQuery.noConflict(); var j$ = jQuery; function simpleSlide(myid, animateInterval, width, height) { if(typeof(myid) == "undefined") var myid = '#slide'; var mylist = myid + ' > li'; if(typeof(width) == "undefined") var width = j$(mylist + ':first-child').width(); if(typeof(height) == "undefined") var height = j$(mylist + ':first-child').height(); if(typeof(animateInterval) == "undefined") var animateInterval = 5000; var animeteTime = animateInterval / 5; j$(myid) .css('display', 'block') .css('position', 'relative') .css('width', width + 'px') .css('height', height + 'px') .css('overflow', 'hidden'); j$(mylist).each(function(num) { j$(this) .css('display', 'block') .css('position', 'absolute') .css('top', '0px') .css('left', (width*num) + 'px'); }); setInterval("slide('" + myid + "','" + mylist + "'," + width + "," + height + "," + animateInterval + "," + animeteTime + ")", animateInterval); } function slide(myid, mylist, width, height, animateInterval, animeteTime) { j$(myid).append(j$(mylist + ':first-child').clone()); j$(mylist + ':last-child').css('left',(width * (j$(mylist).length - 1)) + 'px'); j$(mylist).each(function(num) { if(j$(mylist).length - 1 == num) { j$(this).animate({ left: '-=' + width + 'px' }, animeteTime, null, function() { j$(mylist + ':first-child').remove(); }); } else { j$(this).animate({ left: '-=' + width + 'px' }, animeteTime); } }); } |