skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

画像を切り替えるJavaScript「jQuery Slinky Slider」

｜ ｜ ｜ ｜ ｜ ｜ ｜

表示している画像をスムーズに切り替えて表示することができればユーザーの興味を喚起することができます。
jQuery Slinky Sliderは、画像を外部ファイルから読み込んで表示することができます。

使用方法
jQuery Slinky Sliderからjquery.slinkyslider.jsをjQueryからjquery.jsをダウロードします。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.slinkyslider.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#content").slinkySlider();
});
</script>

上記を記述し、表示したいhtmlと同ディレクトリにpanel1.htmlからpanel5.htmlまでをアップロードします。
各htmlには表示させたい画像などを記述します。
さらにCSSを下記のように書きます。
#content {
width:***px;
height:***px;
}
.panelwrappers {
overflow:hidden;
}

最後に表示させたい場所に以下を書き込み完成です。
<div id="content"></div> ※オプション
numberofpanels :5　//スライド枚数
smallsize :20　//閉じたパネルのサイズ
transition :1000　//遷移時間
doauto :true　//自動遷移
autotimer :8000　//遷移の間隔
panelspacing :3　//パネル間のスペース
panelname :"panel"　// htmlのファイル名　（"panel[x].html")とする必要があります。
※使い方次第ではメニューとかにも使えるかもですが、SEOには弱そうです。
画像を切り替えるJavaScript「jQuery Slinky Slider」サンプル

記事作成：2009年01月20日

前の記事：フォームの入力文字数をチェックするJavaScript「Maxlength Plugin」
次の記事：ページをめくるようなエフェクトJavaScript「The Sexy Curls jQuery Plugin」