JavaScriptかPHPを使って表示枚数をあらわす方法

解決済

質問者：mihomama84
質問日時：2009/05/25 07:18
回答数：4件

画像をつかって現在表示している画像の枚数（7枚中1枚目といった感じの）をあらわす方法を探しています。

PHPかJavaScriptでいけるのではないかと思うのですが・・・

添付画像のように、丸を画像の枚数分用意し、
（画像数もフォルダによって変化します。）
表示されているページの丸は色が変化するようにしようと
おもっています。

また、フォルダによって画像数も変化するので、
この丸の画像も減少しないといけません。

また、1枚目の画像を表示時に、3枚目の画像の丸を押した場合、
3枚目の画像にリンクしていて、3枚目の画像が表示されるように
したいのです。

かなりややこしいのですが、
どなたかご教授いただけないでしょうか！
宜しくお願いします！！！

※添付画像が削除されました。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： babu_baboo
回答日時：2009/05/25 16:20

がぞうをぜんぶよみこむのが、むだなようなきもするけど

かいぞうしがいがあるようにしたじょ？＜かなりてぬき。
<!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>

- 0
- 件

通報する

この回答へのお礼

簡単に組まれた、とのことですが、
ここまでのご回答を頂いてありがとうございます！！！
完璧です！

これを元に、フォルダの指定をPHPで入れえてみようと
思います。

本当にありがとうございました。

通報する

お礼日時：2009/05/26 04:08

No.4

回答者： babu_baboo
回答日時：2009/05/26 13:31

おいしいとこだけ、もってったなぁ～　ばぶぅ～！^^;

- 0
- 件

通報する

No.3

回答者： yyr446
回答日時：2009/05/26 11:20

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">

</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>

- 0
- 件

通報する

この回答へのお礼

ありがとうございます！！
HTML内のコーディングもかなり短く、
とってもありがたいです！！

少し遅いのは後で解消するとして
これで、実装したいと思います！

本当にありがとうございました！

通報する

お礼日時：2009/05/26 14:32

No.1

回答者： yyr446
回答日時：2009/05/25 12:53

PHPかJavaScriptでいけるのではないかと思うのですが＝＝＞

フォルダー内の画像の数や、画像ファイルの名前を取得するのは、JavaScriptのみでは無理です。予め分かっていて固定ならばJavaScriptのみ
でも出来そうです。

かなりややこしいのですが、＝＝＞
　いきなり全部の機能を作ろうとするから、ややこしくなる。特に期限がないならステップバイステップで、試しながら作ってみてはいかがでしょう。

(1)丸の画像を動的に表示したり、消したりしてみる。
(2)丸の画像をクリックしたり、オンマウスした時に、関数が動作する
　仕組みを作ってみる。
(3)選択された画像を表示する仕組みを作ってみる
(4)丸の画像を変える仕組みを作ってみる
　－－－－
　等