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

画像の切り替えを行うことで閲覧者の興味をひきつけることができます。
現状、多くがFLASHを使用していたりしますが、敷居が高いのが難点でしょう。
今回紹介する「Start/Stop Slider」を使用することで、わりと簡単に導入が可能です。
JavaScriptライブラリ「jQuery」で、いい動きのスライダーを作る「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」サンプル

sponsors

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

記事作成:
記事URL:

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