スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

レイヤーを使ったスライドショーの仕組み

 レイヤーがID名を持っていて、絶対配置され、重ね順(z-index)の値を持っていて、表示属性(Visibility)で消したり表示したりできるオブジェクトであることは先日の投稿で述べた通りです。

 そのレイヤーを使って、どうしたらスライドショーを作ることが出来るかを、ここでは整理します。

 まず、一番簡単なのは、同じ位置に、同じ大きさの画像を配置して、スクリプトでそのID名を使って、表示する画像だけのvisibility(表示属性)をvisible(可視状態)とし、その他の画像をすべてhidden(不可視)とすることができれば、クリックごとに画像が切り替わるスライドショーが出来上がる。

 その場合に、ID名に連番をつけておけば、スクリプトで一括してスタイルの値を変更することが簡単にできる。

 スライドショーの構造を簡単にするために、まず、画像などのオブジェクトのID名スタイルを以下のように定義する。こうすれば同じやり方でいくらでもスライドショーの枚数を増やすことが出来る。

<img src="画像のURL" id="画像のID名+連番 "(例えば photo1,photo2,photo3,....,photo99,.....など )style="position:absolute;top:0px;left:0px;visibility:hidden;" />

 このやり方の場合は、重ね順でコントロールする訳ではなくて、可視属性でスライドショーを実現する訳だから、z-index属性は記述しないこととする。
 この画像タグを枚数分ID名に連番をつけて配置することが、基本となる。枚数を増やすのが簡単なのがこのスライドショーのよいところだ。もちろんID名を連番にしなくてもファイル名に連番がつけられていればいいのですが、Gooブログの画像フォルダーには連番を名前につけた画像を格納できないために、ID名で切り替えなければならない。

 最初はすべてが不可視の状態だから、最初に表示したい画像だけは visibility:visible; とかきかえておく。

 次に切り替えを実現するスクリプトはどこに記述するかです。
 さきの投稿で、Gooブログの投稿で絶対配置を実現するためには、絶対配置と宣言されたオブジェクトをすべて、相対配置と宣言されたDIV領域に入れてやらなければならないと書いたが、そのDIVタグ内にスクリプトを記述することができる。
 今ひとつは、現在何番目のID名の画像を表示しているのかを格納する変数が必要であるが、外側の相対配置に宣言したDIVタグのz-indexの値にその数値を格納すれば一番簡単だ。かつてはDIV領域の幅(WIDTH)などを使っていたが、戻り値にpxという単位がついてしまうので、数値への変換が面倒だ。z-index値なら、戻り値が数値なのでそのまま使うことが出来る。

<div style="z-index:1; position:relative; width:600px;">ここに画像を配置</div>
という風に記述する。

 スクリプト中から、z-index値や、特定のID名のスタイルの可視属性を変更するには次のようにする

 ID名.style.zIndex=?; ID名.style.visibility=?;

 と?の所に値をいれればよい。 z-indexの用にハイフンがあるスタイル属性は ハイフンを削除しハイフンの次に小文字を大文字に変えて zIndex のように書く決まりになっているので気をつけてください。

 スクリプトの処理としては次のような流れになる

1、すべての画像の可視属性をhiddenとして、表示されているすべての画像をけす。
  ループ処理を使って上のID名の例では (画像は10枚とする)

     for(i=1; i<11;i++)getElementByID('photo'+i).style.visibility='hidden'; 
2、現在の画像の番号が格納された z-index の値を取得する。例えば変数を n とすると、
     n=this.style.zIndex;
     n++; // nに1を加える
     if(n>10) n=1; // nの値が枚数を超えたらnに1を入れる。
     getElementByID('photo'+n).style.visibility='visible';
     this.style.zIndex=n;

これで、n番目の画像だけが表示される訳です。


 実際のソースについては、今までにたくさん公開していますので、参考にしてください。Gooブログでは、ID名やスクリプトを含んだタグには<<と二つつける必要があります。そのままでは<がゴミとして表示されますので、次のようなおまじないで、<を小さく表示して見えないように細工します。

    <span style="font-size:0px;color:背景色;"> ここにソースを記述 </span>


注:本投稿中の<>(括弧)は実際には半角で記述します。

 


コメントの投稿

非公開コメント

FC2カウンター
プロフィール

dongwcat

Author:dongwcat
FC2ブログへようこそ!

最新記事
最新コメント
最新トラックバック
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。