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

表示している画像をスムーズに切り替えて表示することができればユーザーの興味を喚起することができます。
jQuery Slinky Sliderは、画像を外部ファイルから読み込んで表示することができます。
画像を切り替えるJavaScript「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」サンプル

sponsors

「画像を切り替えるJavaScript「jQuery Slinky Slider」」をシェアする

記事作成:
記事URL:

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