javascriptを使って画像を切り替える
javascriptを使って画像(id="chengeImg")を切り替えたいと思っています。
画像はsamp0.jpg~samp4.jpgの計5枚
ただ、問題があって、
画像によって移り替わる時間を変えたいんです。(一定ではない)
setTimeoutの引数(time)と画像を、どう結びつければよいのかが
分からず困っています。
それぞれ、
画像0の時は5000ミリ秒
画像1の時は4000ミリ秒
画像2の時は3000ミリ秒 …
と移り変わる速度を変えたいのです。
一応、timeは配列がいいのかと配列にしてみました
それが良いのかどうかも定かではないのですが…
どのようにすれば、時間が一定でない画像切り替えが可能になるでしょうか?
スクリプトを詳しく教えていただけると、ありがたいです。
以下、javascriptの一部を記します。
【js】ファイル(imagechange.js)------
window.onload=anime;
var img=new Array(5);
img[0]=new Image();
img[1]=new Image();
img[2]=new Image();
img[3]=new Image();
img[4]=new Image();
img[0].src="samp0.jpg";
img[1].src="samp1.jpg";
img[2].src="samp2.jpg";
img[3].src="samp3.jpg";
img[4].src="samp4.jpg";
//画像枚数
var num=0;
//時間制御
time = new Array(5000, 4000, 3000, 3000, 3000);
function anime(){
var ch = document.getElementById("changeImg");
ch.src=img[num].src;
if(num<4){
num++;
}else{
num=0;
}
setTimeout("anime()",time);
}
【html】ファイル--------
<head>
<title>画像切り替え</title>
<script type="text/javascript" src="imagechange.js"</script>
</head>
<body>
<p><img src="samp0.jpg" width="700" height="200" id="chengeImg"></p>
</body>
</html>
以上となります。
詳しい方、ぜひ教えてくださいませ。
どうぞ宜しくお願いいたします。