簡単スライドショー Slide show

スライドショーを実装するライブラリのご紹介です。

• 
• 
• 

• ※ IE6以下は正常に動作しませんのでご注意ください。

ライブラリのダウンロードと設置

「ライブラリのダウンロード」をクリックしてダウンロードしてください。
ライブラリのダウンロード

ダウンロードしたjquery.slide.jsを任意の場所へ置き読み込みます。
（jQueryの設置および読み込みは、完了もしくは同時作業を行っているものとします。）

<script type="text/javascript" src="jquery.slide.js"></script>

JavaScript

設定したい要素を指定し、実行します。

$(function() { $('#slide').slide(); });

HTML

上記で設定した内容を割り当てます。

<ul id="slide"> <li><img src="img/image1.jpg" width="100" height="100" alt="" /></li> <li><img src="img/image2.jpg" width="100" height="100" alt="" /></li> <li><img src="img/image3.jpg" width="100" height="100" alt="" /></li> </ul>

li要素を切り替える仕組みになっているので、画像以外でも使用できます。

<ul id="slide"> <li><div>テスト1テスト1テスト1</div></li> <li><div>テスト2テスト2テスト2</div></li> <li><div>テスト3テスト3テスト3</div></li> </ul>

CSS

ul#slide { margin:0; padding:0; width:100px; height:100px; position:relative; } ul#slide li { margin:0; padding:0; position:absolute; top:0; left:0; list-style:none; }

オプション

以下のオプションが設定可能です。

オプション	初期値	説明
firstload	0	読み込み時に表示させるインデックス番号。設定値は数値。
showmode	normal	スライド形式（ランダム再生または通常）。 設定値はrandumとnormal。
action	auto	スライドのアクション設定（自動再生またはクリック）。 設定値はautoとclick。
interval_mode	normal	スライドを切り替える間隔方法（ランダムまたは一定）。 設定値はrandumとnormal。
interval_normal	2000	スライドを一定時間切り替える間隔。設定値はミリ秒。
interval_min	2000	スライドをランダムに切り替える最小間隔。設定値はミリ秒。
interval_max	5000	スライドをランダムに切り替える最大間隔。設定値はミリ秒。
animation	true	フェード切り替えの有無。設定値はtrueとfalse。
fadespeed	1000	animationがtrueの場合、フェードの速度。設定値はミリ秒。

$(function() { $('#slide').slide({ interval_normal : 5000, fadespeed : 3000 }); });