 |
jQuery でスライドショー
2010.01.15記 |
ホームページなどをつくっていると、画像の見せ方をちょっと凝ってみたくなります。
Flashなどを使う方法もあるかもしれませんが、今回は、JavaScriptを使ってのスライドショーを探してみました。jQuery限定で (^^ゞ
当サイトのサンプルでは Google AJAX Libraries API を利用して jQuery をロードしています。
Flashなどを使う方法もあるかもしれませんが、今回は、JavaScriptを使ってのスライドショーを探してみました。jQuery限定で (^^ゞ
当サイトのサンプルでは Google AJAX Libraries API を利用して jQuery をロードしています。
s3Slider jQuery plugin
http://www.serie3.info/s3slider/
当サイトの設置サンプル
キャプション・説明等が半透明でスライドイン・アウトします。画像の切替タイミングはミリ秒単位で設定します。
Simple slideshow with jQuery
http://www.incg.nl/blog/2009/simple-slideshow-with-jquery/
当サイトの設置サンプル
画像の下側のナビゲーションボタンのクリックで画像を切り替えます。これはダウンロードするものはなく、説明からコピペして調整するだけです。
css globe: Simple Way to Random Display or Rotate Content Using JavaScript and CSS
http://cssglobe.com/post/6023/simple-way-to-random-display-or-rotate-content-using
当サイトの設置サンプル
ランダムに切り替わります。これはダウンロードするものはなく、説明からコピペして調整するだけです。
jQuery Cycle Plugin
http://www.malsup.com/jquery/cycle/
当サイトの設置サンプル
多数の切替エフェクトがあります。当サイトのサンプルではその中の４つを設置してあります。
ダウンロードしたアーカイブから１つのファイルをアップロードしました。当サイトの設置サンプルは「jquery.cycle.all.js」だけでOKでした。
ダウンロードしたアーカイブから１つのファイルをアップロードしました。当サイトの設置サンプルは「jquery.cycle.all.js」だけでOKでした。
css globe: jQuery plugin - Easy Image or Content Slider
http://cssglobe.com/post/3783/jquery-plugin-easy-image-or-content-slider
当サイトの設置サンプル
画像の左下に「Previous」「Next」のリンクが現れ、そのリンクをクリックすることで画像をスライドさせます。
ダウンロードしたアーカイブから「easySlider.packed.js」をアップロードして利用します。
解説サイトではデモが３つありますが、当サイトでは「Default non-styled image slider」を設置してみました。
ダウンロードしたアーカイブから「easySlider.packed.js」をアップロードして利用します。
解説サイトではデモが３つありますが、当サイトでは「Default non-styled image slider」を設置してみました。
Photo Slider Tutorial
http://opiefoto.com/articles/photoslider
当サイトの設置サンプル
ダウンロードしたアーカイブから「photoslider.js」「photoslider.css」をアップロードして利用します。
jQuery はバージョンに注意。
jQuery はバージョンに注意。
当サイトでの設置サンプルは Internet Explorer 7 と FireFox 3.5 で動作確認を行ないました。
 2010.02.15 印刷会社のホームページ8（世田谷） |
 2010年 |
ホーム