トップ  >  2010年  >  2010.01.15 jQuery でスライドショー
features
jQuery でスライドショー
2010.01.15記

ホームページなどをつくっていると、画像の見せ方をちょっと凝ってみたくなります。
Flashなどを使う方法もあるかもしれませんが、今回は、JavaScriptを使ってのスライドショーを探してみました。jQuery限定で (^^ゞ

当サイトのサンプルでは Google AJAX Libraries API を利用して jQuery をロードしています。

s3Slider jQuery plugin

  http://www.serie3.info/s3slider/

  当サイトの設置サンプル
s3Slider jQuery plugin
キャプション・説明等が半透明でスライドイン・アウトします。画像の切替タイミングはミリ秒単位で設定します。

Simple slideshow with jQuery

  http://www.incg.nl/blog/2009/simple-slideshow-with-jquery/

  当サイトの設置サンプル
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

  当サイトの設置サンプル
css globe: Simple Way to Random Display or Rotate Content Using JavaScript and CSS
ランダムに切り替わります。これはダウンロードするものはなく、説明からコピペして調整するだけです。

jQuery Cycle Plugin

  http://www.malsup.com/jquery/cycle/

  当サイトの設置サンプル
jQuery Cycle Plugin
多数の切替エフェクトがあります。当サイトのサンプルではその中の4つを設置してあります。
ダウンロードしたアーカイブから1つのファイルをアップロードしました。当サイトの設置サンプルは「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

  当サイトの設置サンプル
css globe: jQuery plugin - Easy Image or Content Slider
画像の左下に「Previous」「Next」のリンクが現れ、そのリンクをクリックすることで画像をスライドさせます。
ダウンロードしたアーカイブから「easySlider.packed.js」をアップロードして利用します。
解説サイトではデモが3つありますが、当サイトでは「Default non-styled image slider」を設置してみました。

Photo Slider Tutorial

  http://opiefoto.com/articles/photoslider

  当サイトの設置サンプル
Photo Slider Tutorial
ダウンロードしたアーカイブから「photoslider.js」「photoslider.css」をアップロードして利用します。
jQuery はバージョンに注意。

当サイトでの設置サンプルは Internet Explorer 7 と FireFox 3.5 で動作確認を行ないました。
前
2010.02.15 印刷会社のホームページ8(世田谷)
カテゴリートップ
2010年

PAGE TOP 
メニュー
サイト内検索
ログイン
ユーザ名:

パスワード:


パスワード紛失

新規登録
Copyright(C) 1999-2018 keibunsya all right reserved.