掲示板/JavaScript質問板/過去ログ/一覧/ 同じスクリプトを同じソース内で複数表示したい

0 名前： emanon ： 2006/11/10（金） 21:38 ID:U0w8vHSv

お初です、
以下は見ていただければわかるかと思いますがボタンを押すことで4枚の画像をスクロール、ストップさせるようになっているものです。これを横に並べたいのですがなかなかうまくいきません。

<html>
<head>
<script language="javascript">
var n=0
var image=new Array(4);
function Setimage()
{
for(i = 0 ; i<4 ; i++)
	{
	image[i]=new Image(200,150);
	image[i].src="image"+i+".jpg";
	}
}
function Scroll()
{
	time=setTimeout("Scroll()",20);
	document.photo.src=image[n].src;
	n++
	if(n>=4)
	n=0;
}
function Stop()
{
	clearTimeout(time);
}
</script>
</head>
<body>
<img src="image0.jpg" name="photo" width="200" height="150">
<br>
<form name="slot">
<input type="button" name="stop" value="止める" onClick="Stop()">
<input type="button" name="start" value="始める" onClick="Setimage();Scroll()">
</form>
</body>
</html>

テーブルタグで囲って個数分列つくり、各セル内に

<img src="image0.jpg 
～
</form>

の部分を入れたり(この場合セル内に画像とボタンは出ますがボタンを押しても動作しません。)、関数名を変更して別々に指定したりと試行錯誤しているのですがなかなかうまくいってくれません。
どなたかご助力願います。

1 名前： m035 ◆Wpzr1YKOiq ： 2006/11/10（金） 21:38 ［URL］ ID:vJLNklfR

document.photo.srcが<img name="photo">のsrcを指定しています。
つまり、このままの方法では各img要素ごとの関数を作らなければいけません。

function srcSet(name,src){
document.images[name].src=src;
}

のように引数から対象のimg要素のnameを指定するように変更してみてください。
（もちろん、各img要素のnameをダブらないようにしなければいけません）

2 名前： emanon ： 2006/11/10（金） 21:38 ID:Q7v9GIlC

多忙のあまり手がつけられずお返事も出来ずにいました、すみません。
ん～、やっぱよくわかんないです、すみません。
以下、現在のソースです。

<html>
<head>
<script language="javascript">
var n=0
var image=new Array(4);
function Setimage()
{
for(i = 0 ; i<4 ; i++)
	{
	image[i]=new Image(200,150);
	image[i].src="image"+i+".jpg";
	}
}
function Scroll()
{
	time=setTimeout("Scroll()",100);
	function srcSet(n,src)
	{
		document.images[n].src=src;
		n++
		if(n>=4)
		n=0;
	}
}
function Stop()
{
	clearTimeout(time);
}
</script>
</head>
<body>
<table>
<tr>
	<td>
<img src="image0.jpg" name="photo" width="200" 

height="150">
<br>
<form name="slot">
<input type="button" name="stop" value="止める" 

onClick="Stop()">
<input type="button" name="start" value="始める" 

onClick="Setimage();Scroll()">
</form>
	</td>
	<td>
<img src="image0.jpg" name="photo" width="200" 

height="150">
<br>
<form name="slot">
<input type="button" name="stop" value="止める" 

onClick="Stop()">
<input type="button" name="start" value="始める" 

onClick="Setimage();Scroll()">
</form>
	</td>
	<td>
<img src="image0.jpg" name="photo" width="200" 

height="150">
<br>
<form name="slot">
<input type="button" name="stop" value="止める" 

onClick="Stop()">
<input type="button" name="start" value="始める" 

onClick="Setimage();Scroll()">
</form>
	</td>
</tr>
</table>
</body>
</html>

やっぱまわらないっす・・・・・・　||ii○|￣|＿ii||

3 名前： m035 ◆Wpzr1YKOiq ： 2006/11/10（金） 21:38 ［URL］ ID:0FuS8cOf

nameを元に特定のimg要素のsrcを変化させるので、
document.imagesを使う場合、同じnameがあると不都合なんです。
複数作る場合は各imgのnameは別々の物にする必要があります。
（document.getElementsByNameを使う場合はその限りではありませんが･･････）
以下、適当な例。

<html>
<head>
<title>test</title>
<script type="text/javascript">
<!--
var onCnt=0;
var image=new Array(4);
var time=setTimeout("",0);
var sw=[];
var cnt=[];
for(var i = 0 ; i<4 ; i++){
	image[i]=new Image(200,150);
	image[i].src="image"+i+".jpg";
}
function Scroll(name){
	if(!sw[name]){
		sw[name]=1;
		cnt[name]=0;
		onCnt++;
	}
	if(onCnt==1){
		imgCh();
	}
}
function imgCh(){
	for(var name in cnt){
		if(!!sw[name]){
			srcSet(name,image[cnt[name]++].src);
			if(cnt[name]>=4){
				cnt[name]=0;
			}
		}
	}
	time=setTimeout(imgCh,20);
}
function Stop(name){
	if(!!sw[name]){
		sw[name]=0;
		onCnt--;
	}
	if(onCnt==0){
		clearTimeout(time);
	}
}
function srcSet(name,src){
	document.images[name].src=src;
}
//-->
</script>
</head>
<body>
<form>
<img src="image0.jpg" name="photo0" width="200" height="150"><br>
<input type="button" name="stop" value="止める" onClick="Stop('photo0')">
<input type="button" name="start" value="始める" onClick="Scroll('photo0')">
<hr>
<img src="image0.jpg" name="photo1" width="200" height="150"><br>
<input type="button" name="stop" value="止める" onClick="Stop('photo1')">
<input type="button" name="start" value="始める" onClick="Scroll('photo1')">
<hr>
<img src="image0.jpg" name="photo2" width="200" height="150"><br>
<input type="button" name="stop" value="止める" onClick="Stop('photo2')">
<input type="button" name="start" value="始める" onClick="Scroll('photo2')">
</form>
</body>
</html>