簡単スライドショー 2 Slide show

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

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

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

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

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

JavaScript

設定したい要素などを指定しします。

$(function() { $('#slide').ad({ // メインイメージ main : [ 'img/image1.jpg', 'img/image2.jpg', 'img/image3.jpg' ], // サムネールイメージ thumbnail : [ 'img/thumbnail1.jpg', 'img/thumbnail2.jpg', 'img/thumbnail3.jpg' ] }); });

HTML

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

<div class="ad" id="slide"></div>

CSS

div.ad { width:500px; /* サムネールを含めたイメージの横幅 */ } div.ad div.admainbox { width:400px; /* メインイメージの横幅 */ float:left; } div.ad div.adthumbnailbox { width:100px; /* サムネールの横幅 */ float:right; line-height:0; } div.ad br.clear { clear:both; font-size:0; line-height:0; }

オプション

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

オプション	初期値	説明
dn	0	読み込み時の初期に表示させるインデックス。設定値は数値。
speed	500	サムネールを含めたフェードイン・アウトの速度。設定値はミリ秒。
interval	2000	スライドを切り替える間隔。設定値はミリ秒。

$(function() { $('#slide').ad({ main : [ 'img/image1.jpg', 'img/image2.jpg', 'img/image3.jpg' ], thumbnail : [ 'img/thumbnail1.jpg', 'img/thumbnail2.jpg', 'img/thumbnail3.jpg' ] }, { speed : 1000, interval : 5000 }); });