Javascript(JQuery)でスライドショーが完成した

 以前から、何回かに分けて作っていたスライドショーの部品を1つにまとめてみました。使い方は、右側の画像をクリックすると中央の画像がフェードインして切り替わります。また、一定時間が経過すると指定したフィルター効果で、次の画像に切り替わります。

JavaScript スライドショー 完成

使い方

1. 画像を変更変更する
「index.html」の「id=”ScrollArea”」の部分に大きい画像を、「id=”Hidden_imgs”」の部分にサムネール画像を追加してください。「id=”ScrollArea”」と「id=”Hidden_imgs”」に設定する画像枚数は同じにしてください。「id=”ScrollArea” img」の「name=”0″」は0から始まる半角の数字で、連番にしてください。

2. フィルターの種類を変更する
フィルターを変更するには、「Hidden_imgs」の「input value」がフィルターの番号です。半角の数字で指定してください。フィルター番号に関しましては、各JavaScriptファイルのswitch部分を参考にしてください。

3. デザインを変更する
デザインを変更するには、「index.css」を修正してください。javascriptファイルを変更する必要はありません。

 ソースコードは、以下のようになっています。もし良かったらダウンロードしてください。
tar形式でダウンロード
zip形式でダウンロード

Be the first to comment on "Javascript(JQuery)でスライドショーが完成した"

Leave a comment