黄昏より暗きもの、血の流れより赤きもの

黄昏より暗きもの、血の流れより赤きもの

自分の好きな事を好きなように書いて行きます。

JQueryでスライドショー

*[JQuery]JQueryでスライドショー

ひょんな事からJQueryを使ったスライドショーを作成した。以下のソースコードfirefoxで動作しており、無事に使用する事が可能。

大まかな仕様

本スライドショーの仕様は以下のようになる。

  1. 各画像のサムネイルをクリックすると、divのwrapクラス上に各画像が表示される。
  2. サムネイルをクリックすると、現在クリックされている以外の物は全て半透明になる
  3. 「left」「right」のボタンをクリックすると、全てのサムネイルが一列ずつ移動する

詳細な仕様

id,class,name名

  • [name]left_btn:左にスライドを動かすボタン
  • [name]right_btn:右にスライドを動かすボタン
  • [name]btn:スライド用の各ボタン部分
  • [id]image:スライド用のテーブル
  • [class]btn_image:ボタン用のイメージ

苦労した点

1.自分で1から作るべきか既存の改良をするべきか?

既存のホームページを改良したり継ぎ足しで新しいページを作ると言った場合、既存の物をどう活かして短時間で作成して行く事は多い。そんなときサイトのある特定の機能を1から自作するか?どこかから借りて改良するか?その結果どれくらい短時間で確実に実装ができるか?こんな事が分かれば苦労はしないし、逆に分かるようならプログラマーと言うか技術職は必要ないであろう。

今回は自分が作りたいページに近いテンプレートが無かった事から、結果的に一から自作する決断を下した。決め手は多くのスライドショーにはサムネイルが表示するような形式で無かった事だった。

プログラムの説明

まずサムネイルがクリックされた時の動作について説明する。まず何番目のサムネイルがクリックされたかを判別する為には、JQueryで何番目のli要素がクリックされたかを調べる必要がある。この為には[name=btn**]の**の部分を、ソースコードの22行目のように取得していく。

次は取得した番号以外のサムネイルを半透明に、そうでない物のみ透明度100に指定していけばよい。最後に36行目のようにwrapクラスのcssの属性を書き換え、押したサムネイルに対応するイメージが表示されれば良い。その後の部分に関してはanimate関数を使い、ボタン1クリック1画像分ずつ動化して行くように手配して行けば良い。以下に今回製作したソースコードをここに示す。

コード