- ベストアンサー
JavaScriptかPHPを使って表示枚数をあらわす方法
画像をつかって現在表示している画像の枚数（7枚中1枚目といった感じの）をあらわす方法を探しています。 PHPかJavaScriptでいけるのではないかと思うのですが・・・ 添付画像のように、丸を画像の枚数分用意し、 （画像数もフォルダによって変化します。） 表示されているページの丸は色が変化するようにしようと おもっています。 また、フォルダによって画像数も変化するので、 この丸の画像も減少しないといけません。 また、1枚目の画像を表示時に、3枚目の画像の丸を押した場合、 3枚目の画像にリンクしていて、3枚目の画像が表示されるように したいのです。 かなりややこしいのですが、 どなたかご教授いただけないでしょうか！ 宜しくお願いします！！！
- mihomama84
- お礼率73% (91/124)
- JavaScript
- 回答数4
- ありがとう数3
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
がぞうをぜんぶよみこむのが、むだなようなきもするけど かいぞうしがいがあるようにしたじょ？＜かなりてぬき。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <style type="text/css"> #gazou { width:640px; height:300px; margin:0px; padding:0px; ist-style-type:none; overflow:hidden; position:relative; z-index:0; } #gazou li { position:absolute; top:0px; left:0px; z-index:0;} #gazou img { border:0px none; width:640px; height:300px;} #menu { height:30px; background-color:#500; color:#ddd; width:640px; line-height:30px;font-family:sans-serif;} #menu-no { float:left; margin-left:1em; } #menu-next { float:right; margin:0 2em;vertical-align: middle;} #menu-next a { color:white; } #menu-index { float:right; font-size:150%; list-style-type:none; margin:0; padding:0;} #menu-index li { float:left; margin:0 .7ex;} .em { font-size:150%; font-weight:bold; } .ya { font-size:150%; color:red; } </style> <ul id="gazou"> <li><img src="./img/1.gif" alt="Image1/x"></li> <li><img src="./img/2.gif" alt="Image2/x"></li> <li><img src="./img/3.gif" alt="Image3/x"></li> <li><img src="./img/4.gif" alt="Image4/x"></li> <li><img src="./img/5.gif" alt="Image5/x"></li> </ul> <div id="menu"> <div id="menu-no"> <span class="em" id="num0">1</span> OF <span class="em" id="num1">x</span> DETAILS </div> <div id="menu-next"><a href="htt:ww">NEXT</a><span class="ya"> ▶</span></div> <ul id="menu-index"> </ul> </div> <script type="text/javascript"> //@cc_on var M0, M1; /*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/ 'load', function () { var cnt = 0, I, o; var UL = document.getElementById('gazou'); var LI = UL.getElementsByTagName('LI'); var MI = document.getElementById('menu-index'); document.getElementById('num1').firstChild.nodeValue = I = LI.length; for (var i = 0; i<I; i++) { o = document.createElement('LI'); o.appendChild(document.createTextNode('○')); o.id = 'idx-' + i; MI.appendChild(o); } (M1 = LI[0]).style.zIndex = 2; }, false); document./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/ 'mouseover', function (evt) { var e = evt./*@if(1) srcElement @else@*/ target /*@end@*/; var p = getParent(e, 'id', 'menu-index'); var n; if (M0) { M0.firstChild.nodeValue = '○'; M0.style.color = ''; M0 = null; } if (p && e.nodeName == 'LI') { e.firstChild.nodeValue = '●'; e.style.color = 'red'; M0 = e; n = e.id.match(/-(\d+$)/)[1]; document.getElementById('num0').firstChild.nodeValue = n - 0 + 1; Image('gazou', n); } }, false); function getParent(node, type, val) { return node ? (val == node[type]) ? node: arguments.callee(node.parentNode, type, val): null; } function Image (id, vno) { var a = 100, LI = document.getElementById(id).getElementsByTagName('LI')[vno];if (LI == M1) return; var P = (function L () { M1.style./*@if(1) filter = 'Alpha(opacity=' + a +')' @else@*/ opacity = a/100 +'' /*@end@*/; if ((a-=20)<0) M1.style.zIndex = 0 +'', LI.style.zIndex = 2 +'', M1 = LI; else setTimeout(L, 30); }); LI.style.zIndex = 1; LI.style./*@if(1) filter = 'Alpha(opacity=100)' @else@*/ opacity = '1' /*@end@*/; P(); } </script>
その他の回答 (3)
- babu_baboo
- ベストアンサー率51% (268/525)
おいしいとこだけ、もってったなぁ～ ばぶぅ～！^^;
- yyr446
- ベストアンサー率65% (870/1330)
PHPの方に質問されている同様の質問に対するMPXさんの解答サンプルとここのbabu_babooさんの解答サンプルを合体させたら、ほとんど出来上がったサンプルの解答が出来ました。実際に動きました。ページ読み込みが遅いですね。 （合体サンプル） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>test</title> <style type="text/css"> #gazou { width:640px; height:300px; margin:0px; padding:0px; ist-style-type:none; overflow:hidden; position:relative; z-index:0; } #gazou li { position:absolute; top:0px; left:0px; z-index:0;} #gazou img { border:0px none; width:640px; height:300px;} #menu { height:30px; background-color:#500; color:#ddd; width:640px; line-height:30px;font-family:sans-serif;} #menu-no { float:left; margin-left:1em; } #menu-next { float:right; margin:0 2em;vertical-align: middle;} #menu-next a { color:white; } #menu-index { float:right; font-size:150%; list-style-type:none; margin:0; padding:0;} #menu-index li { float:left; margin:0 .7ex;} .em { font-size:150%; font-weight:bold; } .ya { font-size:150%; color:red; } </style> <script type="text/javascript" charset="utf-8"> <!-- //@cc_on var M0, M1; /*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/ 'load', function () { var cnt = 0, I, o; var UL = document.getElementById('gazou'); var LI = UL.getElementsByTagName('LI'); var MI = document.getElementById('menu-index'); document.getElementById('num1').firstChild.nodeValue = I = LI.length; for (var i = 0; i<I; i++) { o = document.createElement('LI'); o.appendChild(document.createTextNode('○')); o.id = 'idx-' + i; MI.appendChild(o); } (M1 = LI[0]).style.zIndex = 2; }, false); document./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/ 'mouseover', function (evt) { var e = evt./*@if(1) srcElement @else@*/ target /*@end@*/; var p = getParent(e, 'id', 'menu-index'); var n; if (M0) { M0.firstChild.nodeValue = '○'; M0.style.color = ''; M0 = null; } if (p && e.nodeName == 'LI') { e.firstChild.nodeValue = '●'; e.style.color = 'red'; M0 = e; n = e.id.match(/-(\d+$)/)[1]; document.getElementById('num0').firstChild.nodeValue = n - 0 + 1; Image('gazou', n); } }, false); function getParent(node, type, val) { return node ? (val == node[type]) ? node: arguments.callee(node.parentNode, type, val): null; } function Image (id, vno) { var a = 100, LI = document.getElementById(id).getElementsByTagName('LI')[vno];if (LI == M1) return; var P = (function L () { M1.style./*@if(1) filter = 'Alpha(opacity=' + a +')' @else@*/ opacity = a/100 +'' /*@end@*/; if ((a-=20)<0) M1.style.zIndex = 0 +'', LI.style.zIndex = 2 +'', M1 = LI; else setTimeout(L, 30); }); LI.style.zIndex = 1; LI.style./*@if(1) filter = 'Alpha(opacity=100)' @else@*/ opacity = '1' /*@end@*/; P(); } // --> </script> </head> <body> <a href=" <?php echo $_SERVER["PHP_SELF"] . "?folder=./../image" ; ?>" >フォルダー名</a><br> <?php $folder = $_REQUEST['folder']; //$fname='marker20.png'; $d = dir($folder); while (false !== ($entry = $d->read())) if (eregi('\.(jpg|jpeg|gif|png)$',$entry)) $f[]=$entry; $d->close(); $no=array_search($fname,$f); ?> <ul id="gazou"> <?php for ($i=0;$i<count($f);$i++){ print "<li><img src=\"" . $folder . "/" . $f[$i] . "\" alt=\"Image" . $i . "/x\"></li>"; } ?> </ul><div id="menu"> <div id="menu-no"> <span class="em" id="num0">1</span> OF <span class="em" id="num1">x</span> DETAILS </div> <div id="menu-next"><a href="htt:ww">NEXT</a><span class="ya"> ▶</span></div> <ul id="menu-index"> </ul> </div> </body> </html>
お礼
ありがとうございます！！ HTML内のコーディングもかなり短く、 とってもありがたいです！！ 少し遅いのは後で解消するとして これで、実装したいと思います！ 本当にありがとうございました！
- yyr446
- ベストアンサー率65% (870/1330)
PHPかJavaScriptでいけるのではないかと思うのですが＝＝＞ フォルダー内の画像の数や、画像ファイルの名前を取得するのは、JavaScriptのみでは無理です。予め分かっていて固定ならばJavaScriptのみ でも出来そうです。 かなりややこしいのですが、＝＝＞ いきなり全部の機能を作ろうとするから、ややこしくなる。特に期限がないならステップバイステップで、試しながら作ってみてはいかがでしょう。 (1)丸の画像を動的に表示したり、消したりしてみる。 (2)丸の画像をクリックしたり、オンマウスした時に、関数が動作する 仕組みを作ってみる。 (3)選択された画像を表示する仕組みを作ってみる (4)丸の画像を変える仕組みを作ってみる －－－－ 等
お礼
ご回答ありがとうございます！！ そうなんです。頭の中に一度にやらなきゃいけないことが 押し寄せた感じで・・・大混乱中です(*´Д｀)=з わかりやすく分けていただいてありがとうございます！！ さっそく1～順にやってみようと思います！
お礼
簡単に組まれた、とのことですが、 ここまでのご回答を頂いてありがとうございます！！！ 完璧です！ これを元に、フォルダの指定をPHPで入れえてみようと 思います。 本当にありがとうございました。