WEB相談室

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

タイトル:javascriptでのアニメーションについて

0:[投稿] ほろろ [2006/03/29 14:43 ] [環境:IE6 わからない]

ファイル名に規則性のある画像を9枚アニメーションのように
表示させたいのですがうまくいきません。
ループ再生ではないようにしたいです。

<script type="text/javascript">
<!--
image1=new Image();
image1.src="doko1.jpg";
image2=new Image();
image2.src="doko2.jpg";
image3=new Image();
image3.src="doko3.jpg";
image4=new Image();
image4.src="doko4.jpg";
image5=new Image();
image5.src="doko5.jpg";
image6=new Image();
image6.src="doko6.jpg";
image7=new Image();
image7.src="doko7.jpg";
image8=new Image();
image8.src="doko8.jpg";
image9=new Image();
image9.src="doko9.jpg";
function change()
{
 clearTimeout(timerID);
 if(document.anime.src=image1.src)
    document.anime.src=image2.src;
 else if(document.anime.src=image2.src)
    document.anime.src=image3.src;
if(document.anime.src=image3.src)
    document.anime.src=image4.src;
   else if(document.anime.src=image4.src)
    document.anime.src=image5.src;
  if(document.anime.src=image5.src)
    document.anime.src=image6.src;
 else if(document.anime.src=image6.src)
    document.anime.src=image7.src;
if(document.anime.src=image7.src)
    document.anime.src=image8.src;
 else if(document.anime.src=image8.src)
    document.anime.src=image9.src;

else
  document.anime.src=image1.src;
 timerID=setTimeout("change()",1000);
}
//-->
</script>

↑では駄目なのでしょうか。
アニメーションの作り方は他にもあるそうなのですが、
どのようにすれば良いでしょうか。
よろしくお願いします。


1:[回答] m035 [2006/03/29 19:08 ][URL]

>ループ再生ではないようにしたいです。
よって、doko9.jpgを表示した後はそのままにしておきました。

<script type="text/javascript">
<!--
var img_list=new Array();
for(var i=1;i<10;i++){
img_list[i]=new Image();
img_list[i].src="doko"+i+".jpg"
}
var cnt=0;
function change(){
clearTimeout(timerID);
document.images["anime"].src=img_list[cnt].src;
cnt++;
if(cnt<9)timerID=setTimeout("change()",1000);
}
//-->
</script>
<img src="doko1.jpg" alt="img" name="anime">


2:[回答] m035 [2006/03/29 19:09 ][URL]

訂正
img_list[i].src="doko"+i+".jpg"

img_list[i].src="doko"+i+".jpg";


3:[質問] ほろろ [2006/03/31 09:53 ]

ありがとうございます。
ですが、↑の通りでも出来ませんでした。

<div style="position: absolute; top:60px; left:500px; z-index:6;">
<img src="doko1.jpg" alt="img" name="anime">


このように指定した場所では作動しないのでしょうか。


4:[回答] m035 [2006/03/31 11:52 ][URL]

change();
のように一度、関数を呼び出していますか?
勝手にはスタートしないようにしてありますから。
もし、していないのなら、呼び出してみてください。


5:[質問] ほろろ [2006/03/31 18:49 ]

その呼び出しなのですが、
<body>
<div>
<img>
どれ行うべきなのでしょうか。
何度やってもエラーが起こります。


6:[回答] m035 [2006/03/31 19:24 ][URL]

以下で出来ませんか?
ちょっとしたミスがあったのでそれも修正しておきました。

<html>
<head>
<title>test</title>
<script type="text/javascript">
<!--
var img_list=new Array();
for(var i=1;i<10;i++){
img_list[i-1]=new Image();
img_list[i-1].src="doko"+i+".jpg"
}
var cnt=0;
var timerID=setTimeout("",1);
function change(){
clearTimeout(timerID);
document.images["anime"].src=img_list[cnt].src;
cnt++;
if(cnt<9)timerID=setTimeout("change()",1000);
}
onload=change;
//-->
</script>
</head>
<body>
<img src="doko1.jpg" alt="img" name="anime">
</body>
</html>


7:[完了] ほろろ [2006/03/31 20:31 ]

有り難うございます!!出来ました、動きました。
アニメーションが止まった後にリンク貼るコトは無理ですよね、
さすがにそこまでは・・・・
ちょっとしたミスが↑から分かるんですね、凄いです。
私はまだちょっと手を出すのが早過ぎたかもしれません;
精進します。。。本当に長々と有り難うございました。

回答(必須): 状態:

お名前(必須):

URL:




[戻る]