Javascript(JQuery)で横スクロールと表示切替を合体しました

 以前作った、横スクロールと表示切替のサンプルを合体させました。使い方は、左右のボタンにカーソルを合わせると、スクロールのスピードがアップします。その時は、画像切替はしません。スクロール部分の画像をクリックすると画像が変更されます。自動スクロール中に画像が切り替わるタイミングは、スクロール部分の画像が、横に1つ分移動したときに切り替わります。

 以前と同様に、「java.js」を変更しますと、初期スクロール方向、スピードを調整できます。「index.html」ファイルですが、サムネール画像と上部表示画像の数を合わしてください。合っていないと表示がズレていきます。また、「img」タグの中に「name」属性がありますが、半角数字で「0」から開始してください。

JavaScript サンプル(横スライド 改)

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

(苦戦しました f_cry_33.gif
 スクロール部分が動的に切替り、その画像をクリックした時に対応する画像を表示するのに苦労しました。あまり上手にソースが書けていないかもしれませんが、次回はよりスマートに書きたいです。
 最近、javascriptネタばかりなので、次回は別の内容にしたいと思います。

Be the first to comment on "Javascript(JQuery)で横スクロールと表示切替を合体しました"

Leave a comment