Javascript(JQuery)でスライドショーの横スクロールバージョン

 以前制作したスライドショーの部分変更したバージョンを作りましたので紹介します。変更内容は、スクロールを横スクロールにし、iphoneで操作できるようにしました。その他の仕様は、以前と同じになっています。

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