スポンサーサイト

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

新しい枚数を増やせる障子の開け閉めスライド

 開閉中にマウスをクリックすると不具合が生じるのを修正し、画像の枚数を増やすのを少し楽にソースを修正しました。

 表示する画像のID名に連番をつけて、for(i=0;i<枚数; i++) というところと、if(pmum>枚数)pnum=0; の枚数を変更すれば任意の枚数のスライドを表示できます。ソースの改造はすこし難しい部類ですが挑戦できる方は試してください。


<
< < < < < < < < < < < <
<障子を開けたり閉めたりする>


<center><div style="position:relative; width:550px; height:420px; font-size:0px; color:white; overflow:hidden; "> <<div id="f_idkey" style="z-index:0; font-style:normal; width:2px; " ></div> <<img id="p_idkey" src="photo00" style="position:absolute; top:0px; left:0px; width:550px; height:420px; "/> <img src="http://blog-imgs-43.fc2.com/d/o/n/dongwcat/12723682824bd6cc9aa1749_import.png" style="position:absolute; top:-20px; left:-20px; width:600px; height:480px; z-index: 98; "/> <<img src="http://blog-imgs-43.fc2.com/d/o/n/dongwcat/12723682904bd6cca24c1e8_import.png" id="husuma_L" style="position:absolute; left:0px; top:0px; width:275px; height:420px; z-index:99; " /> <<img src="http://blog-imgs-43.fc2.com/d/o/n/dongwcat/12723682904bd6cca24c1e8_import.png" id="husuma_R" style="position:absolute; right:0px; top:0px; width:275px; height:420px; z-index:99; " /> <<img id="p_idkey0" src="http://blog-imgs-43.fc2.com/d/o/n/dongwcat/12723683034bd6ccafce2f9_import.jpg" style="position:absolute; left:0px; top:0px; width:550px; height:420px; visibility:visible; "/> <<img id="p_idkey1" src="http://blog-imgs-43.fc2.com/d/o/n/dongwcat/12723683094bd6ccb5e0724_import.jpg" style="position:absolute; left:0px; top:0px; width:550px; height:420px; visibility:hidden; "/> <<img id="p_idkey2" src="http://blog-imgs-43.fc2.com/d/o/n/dongwcat/12723683154bd6ccbb9aaf2_import.jpg" style="position:absolute; left:0px; top:0px; width:550px; height:420px; visibility:hidden; "/> <<img id="p_idkey3" src="http://blog-imgs-43.fc2.com/d/o/n/dongwcat/12723683214bd6ccc1b5636_import.jpg" style="position:absolute; left:0px; top:0px; width:550px; height:420px; visibility:hidden; "/> <<img id="p_idkey4" src="http://blog-imgs-43.fc2.com/d/o/n/dongwcat/12723683274bd6ccc7b4144_import.jpg" style="position:absolute; left:0px; top:0px; width:550px; height:420px; visibility:hidden; "/> <<img id="p_idkey5" src="http://blog-imgs-43.fc2.com/d/o/n/dongwcat/12723683334bd6cccdb0d7c_import.jpg" style="position:absolute; left:0px; top:0px; width:550px; height:420px; visibility:hidden; "/> <<img id="p_idkey6" src="http://blog-imgs-43.fc2.com/d/o/n/dongwcat/12723683394bd6ccd37c5ae_import.jpg" style="position:absolute; left:0px; top:0px; width:550px; height:420px; visibility:hidden; "/> <<img id="p_idkey7" src="http://blog-imgs-43.fc2.com/d/o/n/dongwcat/12723683454bd6ccd961066_import.jpg" style="position:absolute; left:0px; top:0px; width:550px; height:420px; visibility:hidden; "/> <<img id="p_idkey8" src="http://blog-imgs-43.fc2.com/d/o/n/dongwcat/12723683514bd6ccdf874b2_import.jpg" style="position:absolute; left:0px; top:0px; width:550px; height:420px; visibility:hidden; "/> </div> <<a href="#dummy" onclick="if(f_idkey.style.width=='1px')return; f_idkey.style.width='1px'; if(f_idkey.style.fontStyle=='normal'){n=0; f_idkey.style.fontStyle='italic'; tid_idkey=setInterval('{n+=55; if(n>275){n=275; clearInterval(tid_idkey); f_idkey.style.width='0px'; } husuma_L.style.left=-n; husuma_R.style.right=-n-1; }',100); for(i=0; i<9; i++) document.getElementById('p_idkey'+i).style.visibility='hidden'; pnum=f_idkey.style.zIndex; document.getElementById('p_idkey'+pnum).style.visibility='visible'; if(++pnum>8)pnum=0; f_idkey.style.zIndex=pnum; } else {n=275; f_idkey.style.fontStyle='normal'; tid_idkey=setInterval('{n-=55; if(n<0){n=0; clearInterval(tid_idkey); f_idkey.style.width='0px'; } husuma_L.style.left=-n; husuma_R.style.right=-n-1; }',100); }">障子を開けたり閉めたりする</a>></center>

コメントの投稿

非公開コメント

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

dongwcat

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

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

この人とブロともになる

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