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

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

sponsors

使用方法

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; }

※数値などは内容物によって調整してください。

sponsors

サンプル

Garden Rack

Donec gravida posuere arcu. Nulla facilisi. Phasellus imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien. Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante. Maecenas tellus.

learn more

Tulip Bulbs

Donec gravida posuere arcu. Nulla facilisi. Phasellus imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien. Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante. Maecenas tellus.

learn more

Garden Gloves

Donec gravida posuere arcu. Nulla facilisi. Phasellus imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien. Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante. Maecenas tellus.

learn more
Javascriptサンプルページ一覧
skuare.net