- ベストアンサー
CSS+Javascriptでスライドショーを作成する方法
- CSSとJavascriptを使用して手動で画像を順番に表示させるスライドショーを作成したいです。
- 現在はidが同じページ内で重複している点やdivにnameを付ける点で構文チェックに引っ掛かっています。
- 同じ動作を実現しつつ、idの重複やnameの使用を回避する方法を教えていただけると助かります。
- trink
- お礼率100% (2/2)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
FirefoxはchildNodesにテキストノードが入ってくるの忘れてました。 <html> <head> <script type="text/javascript"> <!-- var _i=0,ds=null; function seltab(move) { if(!ds){ds=document.getElementById("orz").getElementsByTagName("div");for(var i=1;i<ds.length;++i)ds[i].style.display="none";} var i=move==-2?0:move==-1?_i-1:move==0?0:move==1?_i+1:move==2?ds.length-1:0; if(i!=_i && 0<=i && i<ds.length){ds[_i].style.display="none";_i=i;ds[_i].style.display="block";} } --> </script> </head> <body onload="seltab(0)"> <!-- 順番に表示させる内容 --> <div id="orz"> <div><p>1</p></div> <div><p>2</p></div> <div><p>3</p></div> <div><p>4</p></div> <div><p>5</p></div> </div> <!-- ページ切り替え操作部分 --> <a href="javascript:seltab(-2)">first</a> <a href="javascript:seltab(-1)">back</a> <a href="javascript:seltab(1)">next</a> <a href="javascript:seltab(2)">last</a> </body> </html> でおｋ
その他の回答 (1)
- talepanda
- ベストアンサー率58% (45/77)
別に構文チェックにそこまでこだわる必要もないと思いますが、 <html> <head> <script type="text/javascript"> <!-- var e=null; function seltab(move) { var te=null; switch(move){ case 0:for(var i=0;i<document.getElementById("orz").childNodes.length;++i) document.getElementById("orz").childNodes[i].style.display="none"; case -2:te=document.getElementById("orz").childNodes[0];break; case -1:te=e?e.previousSibling:null;break; case 1:te=e?e.nextSibling:null;break; case 2:te=document.getElementById("orz").childNodes[document.getElementById("orz").childNodes.length-1];break; default:break; } if(e && te)e.style.display="none";if(te){te.style.display="block";e=te;} } --> </script> </head> <body onload="seltab(0)"> <!-- 順番に表示させる内容 --> <div id="orz"> <div><p>1</p></div> <div><p>2</p></div> <div><p>3</p></div> <div><p>4</p></div> <div><p>5</p></div> </div> <!-- ページ切り替え操作部分 --> <a href="javascript:seltab(-2)">first</a> <a href="javascript:seltab(-1)">back</a> <a href="javascript:seltab(1)">next</a> <a href="javascript:seltab(2)">last</a> </body> </html> みたいな。
お礼
ご回答ありがとうございます！ 早速試してみたところ、IE では希望通りの動作を確認できました！ HTMLソースも無駄なIDなどが省けてとても嬉しいです。 ただ、残念ながら Firefox では全ての内容が表示されたままで、うまく動作してくれませんでした。 頂いたソースを元に、これから解決策を探してみようと思います。 どうもありがとうございました。
お礼
ありがとうございます！！ 無事に Firefox でも動作しました！ 教えて頂くだけで終わらせずに、教えて頂いたスクリプトの中身について、これからきちんと勉強していこうと思います。 大変貴重な情報をご提供頂き、ありがとうございました！