シンプルなjQueryプラグインスライドショーSlidesの導入方法です。
導入方法
- jQueryとSlidesをダウンロード
<head>部分に以下を記述。 （スライドする画像のIDがimage、ファイル名がimage0.jpgimage1.jpgimage2.jpgの場合）<script type="text/javascript" src="js/jquery.js" charset="UTF-8"></script> <script type="text/javascript" src="js/jquery.slides.js" charset="UTF-8"></script> <script type="text/javascript"> $(document).ready(function(){ $('#image').Slides({ images : ['images/image0.jpg','images/image1.jpg','images/image2.jpg'] }); }); </script>
修正点
このままではFirefox2でうまく表示されない。
Firebugで確認すると、このスクリプトは既存のIMGタグの上に<span>要素を挿入して、そのbackground-imageとimgを交互に表示して実現している模様。そのspan要素にdisplay:inline-blockを指定しているがFirefox2は対応していないので、表示されない。
Firefox2でも表示されるように以下のように、スクリプトを修正した。
修正前
.css({display : 'inline-block', overflow : 'hidden', height : settings.main.height() + 'px', width : settings.main.width() + 'px'});
修正後
.css({display : 'block', overflow : 'hidden', height : settings.main.height() + 'px', width : settings.main.width() + 'px'});/*78行目*/
また、htmlに書いているIMGをスクリプトで指定したIMGに順番に入れ替えるので、htmlにimage0.jpgを指定していて、スクリプトにimage0.jpgから順番に書くと最初の入れ替えが同じ画像の入れ替えになってしまうので、直感的で無いと思ったので、以下のような修正もした。
/*76行目あたり*/
var imgs = new Image();
imgs.src = settings.images[0];/*配列の最初の画像パスをフルパス取得*/
if(settings.main[0].src==imgs.src){$.fn.Slides.preloadNextImage();}