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

JavaScriptライブラリ「jQuery」で、いい動きのスライダーを作る「Start/Stop Slider」

｜ ｜ ｜ ｜ ｜ ｜ ｜

画像の切り替えを行うことで閲覧者の興味をひきつけることができます。
現状、多くがFLASHを使用していたりしますが、敷居が高いのが難点でしょう。
今回紹介する「Start/Stop Slider」を使用することで、わりと簡単に導入が可能です。

使用方法
Start/Stop Sliderからstartstop-slider.jsをjQueryからjquery.jsをダウロードします。
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="startstop-slider.js"></script>

次に表示する画像などを以下のように指定します。
<div id="slider">
<div id="mover">
<div class="slide">
コンテンツ
</div>
コンテンツ分記載
</div>
</div>

最後にCSSを下記のように記述します。
#slider{ height: 227px; width:900px;overflow: hidden;position: relative; margin: 50px 0; border:1px solid #DCDCDC;}
#mover{position: relative; }
.slide{ padding: 40px 30px; width: 900px; float: left; position: relative; }
#slider-stopper{ position: absolute; top: 0px; right: 20px; background: #ac0000; color: white;padding: 3px 8px; font-size: 10px; text-transform: uppercase; z-index: 1000; }

※数値などは内容物によって調整してください。
JavaScriptライブラリ「jQuery」で、いい動きのスライダーを作る「Start/Stop Slider」サンプル

記事作成：2009年01月06日

前の記事：お手軽にタブ切り替えを行うJavaScript「Spotlight」
次の記事：入力内容の絞込みを行うJavaScript「Live Filter」