スポンサーサイト

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

Visibility属性を利用したスライドショー

 ブログで複数の画像のソースをスクリプトを利用して入れ替える場合に、ネットの速度が十分に速くない場合や、画像のサイズが大きい場合は読み込みが遅くなって切り替えがうまくいかない場合がある。画像を一通り表示してしまえば、インターネットの一時ファイルとしてPC側に保存されるので、次回からは入れ替えをスムースに行なうことができる。
 最初の画像が読み込みのタイムラグで切り替わらない問題を回避するため、画像を最初にすべて非表示で表示しておいてから、スクリプトでスタイルシートのVisibility属性を切り替えることによって画像の切り替えるようにすると、画像の切り替えが最初からスムースになる。

 それに加えて、画像の枚数の追加がスクリプトをちょっとだけいじるだけで簡単に追加できるというのもいい。

 実際に利用する場合にはトラジションの指定を加えるといい。

<
<<<<<<<<<


<
<<<<<<<<<

上がフィルターなし、下はフィルターを設定しています

以下ソースです

<span style="font-size:0px;color:white;"><<div style="position:relative;
width:400px;height:320px;"onclick="n=p0.style.zIndex; n++; for(i=1;i<9;i++)
{if(i==n){getElementById('p'+i).style.visibility='visible';}else
{getElementById('p'+i).style.visibility='hidden';}}if(n>8)n=0;p0.style.zIndex=n;">
<<img id="p0" src="http://blog-imgs-43.fc2.com/d/o/n/dongwcat/12723664174bd6c551a7179_import.jpg"
style="position:absolute; visibility:visible;top:0px;left:0px;z-index:0;z-index:0;" />
<<img id="p1" src="http://blog-imgs-43.fc2.com/d/o/n/dongwcat/12723664234bd6c5574bb25_import.jpg"
style="position:absolute; visibility:hidden;top:0px;left:0px;z-index:99;" />
<<img id="p2" src="http://blog-imgs-43.fc2.com/d/o/n/dongwcat/12723664294bd6c55d1b2fa_import.jpg"
style="position:absolute; visibility:hidden;top:0px;left:0px;z-index:99;" />
<<img id="p3" src="http://blog-imgs-43.fc2.com/d/o/n/dongwcat/12723664344bd6c562aee50_import.jpg"
style="position:absolute; visibility:hidden;top:0px;left:0px;z-index:99;" />
<<img id="p4" src="http://blog-imgs-43.fc2.com/d/o/n/dongwcat/12723664404bd6c568785fa_import.jpg"
style="position:absolute; visibility:hidden;top:0px;left:0px;z-index:99;" />
<<img id="p5" src="http://blog-imgs-43.fc2.com/d/o/n/dongwcat/12723664464bd6c56e420a2_import.jpg"
style="position:absolute; visibility:hidden;top:0px;left:0px;z-index:99;" />
<<img id="p6" src="http://blog-imgs-43.fc2.com/d/o/n/dongwcat/12723664524bd6c5741b3fe_import.jpg"
style="position:absolute; visibility:hidden;top:0px;left:0px;z-index:99;" />
<<img id="p7" src="http://blog-imgs-43.fc2.com/d/o/n/dongwcat/12723664584bd6c57a12814_import.jpg"
style="position:absolute; visibility:hidden;top:0px;left:0px;z-index:99;" />
<<img id="p8" src="http://blog-imgs-43.fc2.com/d/o/n/dongwcat/12723664644bd6c58008055_import.jpg"
style="position:absolute; visibility:hidden;top:0px;left:0px;z-index:99;" /></div></span>

コメントの投稿

非公開コメント

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

dongwcat

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

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

この人とブロともになる

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