画像をつかって現在表示している画像の枚数(7枚中1枚目といった感じの)をあらわす方法を探しています。
PHPかJavaScriptでいけるのではないかと思うのですが・・・
添付画像のように、丸を画像の枚数分用意し、
(画像数もフォルダによって変化します。)
表示されているページの丸は色が変化するようにしようと
おもっています。
また、フォルダによって画像数も変化するので、
この丸の画像も減少しないといけません。
また、1枚目の画像を表示時に、3枚目の画像の丸を押した場合、
3枚目の画像にリンクしていて、3枚目の画像が表示されるように
したいのです。
かなりややこしいのですが、
どなたかご教授いただけないでしょうか!
宜しくお願いします!!!
No.3
- 回答日時:
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内のコーディングもかなり短く、
とってもありがたいです!!
少し遅いのは後で解消するとして
これで、実装したいと思います!
本当にありがとうございました!
No.2ベストアンサー
- 回答日時:
がぞうをぜんぶよみこむのが、むだなようなきもするけど
かいぞうしがいがあるようにしたじょ?<かなりてぬき。
<!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>
簡単に組まれた、とのことですが、
ここまでのご回答を頂いてありがとうございます!!!
完璧です!
これを元に、フォルダの指定をPHPで入れえてみようと
思います。
本当にありがとうございました。
No.1
- 回答日時:
PHPかJavaScriptでいけるのではないかと思うのですが==>
フォルダー内の画像の数や、画像ファイルの名前を取得するのは、JavaScriptのみでは無理です。予め分かっていて固定ならばJavaScriptのみ
でも出来そうです。
かなりややこしいのですが、==>
いきなり全部の機能を作ろうとするから、ややこしくなる。特に期限がないならステップバイステップで、試しながら作ってみてはいかがでしょう。
(1)丸の画像を動的に表示したり、消したりしてみる。
(2)丸の画像をクリックしたり、オンマウスした時に、関数が動作する
仕組みを作ってみる。
(3)選択された画像を表示する仕組みを作ってみる
(4)丸の画像を変える仕組みを作ってみる
----
等
ご回答ありがとうございます!!
そうなんです。頭の中に一度にやらなきゃいけないことが
押し寄せた感じで・・・大混乱中です(*´Д`)=з
わかりやすく分けていただいてありがとうございます!!
さっそく1~順にやってみようと思います!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Windows 10 フォルダ内の全ての画像を矢印キーでスライドできるようにしたい 1 2022/10/21 12:53
- Visual Basic(VBA) エクセルマクロでアニメを作る方法を教えてください。 1 2023/02/07 14:27
- Excel(エクセル) excelvbaでスライドショーを作りたい 2 2023/04/20 14:32
- その他(プログラミング・Web制作) Leafletで画像をon、offさせる方法について 2 2022/11/01 15:34
- CPU・メモリ・マザーボード メモリが使用可能にならない 3 2022/08/13 17:13
- HTML・CSS 画像が分割されて切り替わる、ループアニメーションが作りたい 7 2023/05/27 17:12
- その他(IT・Webサービス) VBAを使って表を作成したいです 1 2022/06/08 21:20
- Android(アンドロイド) スマホ(Android、iosどちらも可)で、2枚の類似画像(写真)の変化前後を比較したい。 添付画 1 2023/08/20 15:15
- Instagram インスタの画像を複数枚投稿出来るものと出来ないものがある問題についてどなたか教えて下さい。 インスタ 4 2022/06/07 13:53
- その他(Microsoft Office) 複数の写真を1枚に印刷 5 2023/05/05 22:41
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
エンドロールを枠の中で表示す...
-
Slick.jsのオプションrtlについて
-
ローカルでは問題なく動くがサ...
-
MAX関数を使ってからLEFT JOIN...
-
c++std::string型をTCHARに変換...
-
javascriptテキストBOX色を元に...
-
jspでcssが読み込めない
-
jsでサムネイルを拡大表示 複...
-
JQueryで画像の上で文字を動かす
-
createElementで作成した要素を...
-
条件分岐でキーが入力されてい...
-
JSPでの画像ファイル表示
-
デフォルト非表示にしたい。【t...
-
htmlの記述で link rel=styles...
-
JavaScript スライドの画像にリ...
-
フッター上部に謎の隙間
-
ロールオーバー効果にならない。
-
jQueryでサーバー上のファイル...
-
アップロードファイルの種類に...
-
スクリプト同士がケンカ?
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
【jQuery】2分割レイアウトで、...
-
アコーディオンメニューが開い...
-
横並びの画像を3枚時間差でフェ...
-
html5に変えるとスライドショー...
-
キャラクターがぴょこんと飛び...
-
jsでグリッドデザインのサムネ...
-
Javaスクリプトで画像を縦にス...
-
複数の要素へ appendchild でき...
-
CSSでマウスオーバーした画像を...
-
【iOS及びAndroid】リンク画像...
-
スライドショー「Skitter」をカ...
-
Dreamweaver上とデバイスプレビ...
-
同一ページ内の複数のタグに同...
-
スライド機能について
-
チェックボックスと画像切替の連動
-
jqueryのプラグインslickの画像...
-
Javascriptを使用したスライド...
-
bxSliderのランダム表示について
-
Firefoxとクロームでフェードイ...
おすすめ情報