初めまして。
初心者なので、教えていただけたら嬉しいです。
他の方の作成されたソースですが、花火画像が4種類設定されています。
花火を打ち上げると、一度に4種類の画像がすべて表示されます。
それを打ち上げごとに、1種類ずつに変更するには、どうすればいいでしょうか。
<script type="text/javascript">
<!--
var xp0=0;
var yp0=0;
var n=30;               //★表示させる画像の数。原本は20
var h;
var doc_width = 600;     //★原本は800
var doc_height = 1800;
xp=new Array();
yp=new Array();
i=new Array();
l=new Array();
dot=new Array();
hosi=new Array();
var k;
var p=0;
var xpp,ypp;
timerID=0;
function STAR_WARS3() { 
for (m=1;m<(n+1);m++){
document.getElementById("dot"+m).style.display="none"; 
}
document.getElementById("tama").style.display="block";
clearTimeout(timerID);
xpp=screen.width;
ypp=screen.availHeight;
xxpp=0.5*(0.5+0.9*Math.random())*xpp;
yypp=0.4*(0.5+Math.random())*ypp;
doc_width =document.body.scrollLeft+xxpp;
doc_height=document.body.scrollTop+ypp*7/10;
xp0 = doc_width; 
yp0 =  doc_height; 
STAR_WARS4();
}
function STAR_WARS4() { 
document.getElementById("tama").style.display="block";
if(yp0>yypp){
document.getElementById("tama").style.top = yp0-10+"px";
document.getElementById("tama").style.left =xp0-10+"px";
yp0=yp0-10;
timerID=setTimeout("STAR_WARS4()",50);
}else if(yp0<=yypp){
clearTimeout(timerID);
STAR_WARS2();
}
}
timerID=0;
function STAR_WARS2() { 
document.getElementById("tama").style.display="none";

for (m=1;m<(n+1);m++){
if(m<=(n/2)){
xp[m]=xp0+1*Math.cos((m-1)*2*3.14/n*2);
yp[m]=yp0-1*Math.sin((m-1)*2*3.14/n*2);
i[m]=xp[m]-xp0;
l[m]=yp[m]-yp0;
}else{
xp[m]=xp0+0.5*Math.cos((m-1)*2*3.14/n*2);
yp[m]=yp0-0.5*Math.sin((m-1)*2*3.14/n*2);
i[m]=xp[m]-xp0;
l[m]=yp[m]-yp0;
}
}
k=10;   //はじけるスピード(最初)
p=0;
STAR_WARS();
}
function STAR_WARS() {
p=p+1;
for (m=1;m<(n+1);m++){
document.getElementById("dot"+m).style.display="block";
document.getElementById("dot"+m).style.top = yp[m]+"px";
document.getElementById("dot"+m).style.left = xp[m]+"px";
xp[m]=xp[m]+k*i[m];
yp[m]=yp[m]+k*l[m]+0;//3は落下方向のスピード。0は落下しない。★原本0
k=k*0.994;           //はじけるスピードの減速係数。１以下で減速、１以上で加速
}
timerID=setTimeout("STAR_WARS()",50);//50を小さくするとこまやかな動きになるが負荷が大きくなる
if (p>=50) {    //この行と下の行の20ははじけて消えるまでの時間。40にしてあった。
p=50;          //この行と上の行の20ははじけて消えるまでの時間。40にしてあった。
for (m=1;m<(n+1);m++){
document.getElementById("dot"+m).style.display="none"
}
clearTimeout(timerID);
STAR_WARS3();
}
}
var j=0;
hosi[0]="pe1.gif";//★花火の画像指定
hosi[1]="pe2.gif";//★複数花火画像にするときはこのように画像を足していく。1種類でも可能
hosi[2]="pe3.gif";
hosi[3]="pe4.gif";

for (m=1;m<(n+1);m++){
if (j == (hosi.length-1)) { j = 0; } else { j += 1; }
document.write('<div id="dot'+m+'" style="position: absolute; z-index:'+m+' ;display:none; top: 15px; left: 15px; width:1px;"><img src="'+hosi[j]+'" border="0"></div>');
}
/*★下から打ち上げる画像指定*/
document.write('<div id="tama" style="position: absolute;display:none; top: 15px; left: 15px;"><img src="sen.png"></div>');
window.onload = STAR_WARS3;

// -->
</script>