WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:画像の繰り返しを無くしたい2

0:[投稿] みお [MAIL] [2002/04/09 17:36 ][環境:WIN+IE わからない]

すみません。以前、「画像の繰り返しを無くしたい」で
スライドショーの画像を、1巡で止めるための方法として
以下のようなソース(?)を教えていただきました。
<body>
<IMG ID=gazo1 SRC="../../images_set/102030601/img1.png" STYLE="filter:revealTrans(duration=9.0)">
<SCRIPT LANGUAGE="JavaScript">  
<!--
var i=1;
revealTr();

function revealTr(){
if(i<2){ i++; } else{ i=1; }
gazo1.filters.revealTrans.Apply();
gazo1.filters.revealTrans.Transition=5;
gazo1.src="../../images_set/102030601/img"+i+".png";
gazo1.filters.revealTrans.Play();
window.setTimeout("revealTr2()",10000);
}

function revealTr2(){
if(i<2){ i++; } else{ i=1; }
gazo1.filters.revealTrans.Apply();
gazo1.filters.revealTrans.Transition=5;
gazo1.src="../../images_set/102030601/img"+i+".png";
gazo1.filters.revealTrans.Play();
}

//-->
</SCRIPT>

この方法で、画像を2枚から3枚に増やすことはできたのですが
(if(i<2)をif(i<3)に変えて)
画像を5枚に増やそうとしても、3枚目の表示で止まってしまいます(if(i<5)としただけでは正確に動きません)。
画像は<head></head>部分で読み込ませてあります。
function revealTr2(){
以下の式を削除して、
2行前の
window.setTimeout("revealTr2()",10000); を
window.setTimeout("revealTr()",10000); と
すると、5枚の画像が永遠と繰り返されるので、
function revealTr2(){
以降に原因があるのだと思いますが、
どれだけ眺めてみても、この式がナニを意味しているのか
解らないので、画像の数を増やすことが出来ません。

申し訳ありませんが、
どうしたら画像が増やせるのか、
どうしてそうなるのかを教えていただけると嬉しいです。


1:[回答] 天上人プサン [URL] [2002/04/10 00:19 ]

ソースだけ組んでみました。
無茶眠いですので、また明日にでも…すみません。

<html>
<body onload="slideshow()">
<script language="JavaScript">
<!--
var i, page = 0;
var repeat = 1; //繰り返し(0=no 1=yes)

picture = new Array();
file = new Array(
"page0.gif",
"page1.gif",
"page2.gif",
"page3.gif",
"page4.gif"
);
for (i = 0; i < file.length; i++) {
picture[i] = new Image(); picture[i].src = file[i]
}

function slideshow() {
if (document.all) {
 document.images["slidearea"].src = picture[page].src
}
else if (document.layers) {
 document.images["slidearea"].src = picture[page].src
}

page++;
if (page == file.length) { page = 0 }
if (page || repeat) { setTimeout("slideshow()", 500) }
}
//-->
</script>

<center>
<table border=1 cellpadding=0>
<tr><td><img name="slidearea" src="nowloading.gif" width=256 height=212></td></tr>
</table>
</center>
</body>
</html>


2:[回答] 天上人プサン [URL] [2002/04/10 19:54 ]

画像サイズは全てのコマで統一して下さい。
サンプルでは256x212としていますので、変更されれば良いです。

繰り返し表示のオンオフ、一コマの表示時間を変更できます。

file = new Array( 以下に、
表示したい画像のファイル名(URL)を定義して下さい。

枚数は設定しなくても、プログラムが調べます。

IE、NC4.7に対応してます。
NN6はどうでしょうね。

<html>
<body onload="slideshow()">
<script language="JavaScript">
<!--
var i, page = 0;
var repeat = 1; //繰り返し (0=no 1=yes)
var second = 1000; //一コマの表示時間 (1秒=1000)

picture = new Array();
file = new Array(
"page0.gif",
"page1.gif",
"page2.gif",
"page3.gif",
"page4.gif"
);
for (i = 0; i < file.length; i++) {
picture[i] = new Image(); picture[i].src = file[i]
}

function slideshow() {
document.images["slidearea"].src = picture[page].src;

page++;
if (page == file.length) { page = 0 }
if (page || repeat) { setTimeout("slideshow()", second) }
}
//-->
</script>

<center>
<table border=1 cellpadding=0>
<tr><td><img name="slidearea" src="nowloading.gif" width=256 height=212></td></tr>
</table>
</center>
</body>
</html>


3:[質問] みお [MAIL] [2002/04/11 15:36 ]

どうもありがとうございました。
スライドショーにもいろいろなソースの組み方があるのですね。
無知でもうしわけありませんでした。
それで、さっそくHPに組み込ませていただきました。
画像を増やしたり減らしたりしてもちゃんと動きました!!!
どうもありがとうございましたm(__)m

…ところで、あつかましいご質問なのですが、
画像のスライド(?)の方法なのですが、
以前のソースにあった
revealTrans.Transition=5
はこちらのソースには組み込めないものでしょうか(^^ゞ
ふにゃぁとまん中から画像が変化していくのがちょっと気に入って
いたものですから(^^ゞ

理解力の無い質問者で申し訳ありませんが、
どうぞご指導くださいますようお願い申し上げますm(__)m


4:[回答] 天上人プサン [2002/04/11 21:14 ]

画像が変化するのは、ウインドウズIE専用の機能だから、
私の環境(マックIE)等では見れませんので、処理を分けました。
動作確認も出来ませんので、
とりえあず、動くか御報告ください、すみません(^^;;

一コマの表示時間には画像が切り替わる時間も入れて下さい。
初期値を5秒にしています。

<html>
<body onload="slideshow()">
<script language="JavaScript">
<!--
var i, page = 0;
var repeat = 1; //繰り返し (0=no 1=yes)
var second = 5000; //一コマの表示時間 (1秒=1000)

//トランジション機能が利用可能かを調べる
trans = navigator.platform.match(/Win/) && document.all ? 1 : 0;

picture = new Array();
file = new Array(
"page0.gif",
"page1.gif",
"page2.gif",
"page3.gif",
"page4.gif"
);
for (i = 0; i < file.length; i++) {
picture[i] = new Image(); picture[i].src = file[i]
}

function slideshow() {
if (trans) {
 slidearea.filters.revealTrans.Transition = 5;
 slidearea.filters.revealTrans.Apply();
 slidearea.src = picture[page].src;
 slidearea.filters.revealTrans.Play()
} else {
 document.images["slidearea"].src = picture[page].src
}

page++;
if (page == file.length) { page = 0 }
if (page || repeat) { setTimeout("slideshow()", second) }
}
//-->
</script>

<center>
<table border=1 cellpadding=0>
<tr><td><img name="slidearea" src="nowloading.gif" width=256 height=212></td></tr>
</table>
</center>
</body>
</html>


5:[完了] みお [MAIL] [2002/04/15 13:01 ]

どうもありがとうございました!!!
トランジョン機能というのはWindowsのIEでしか動作しなかったの
ですね。知りませんでした。
動作確認のできない環境でソースを組んでくださいまして
ほんとうにどうもありがとうございました。
HPに組み込んで確認いたしましたらちゃんと動きました。
ありがとうございましたm(__)m

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World