実行結果:
|
|
STYLE: 主たる内容
.ImgAnime {
animation-name: Test;
animation-duration: 10s;
animation-iteration-count: 1;
}
@keyframes Test {
from {
opacity:0;
}
10% {
opacity:1;
}
90% {
opacity:1;
}
to {
opacity:0;
}
}
#IdHaikei IMG {
opacity:0;
}
HTML:
<TABLE class=Gakubuti> <TR><TD id=IdImgTitle> <TR><TD id=IdHaikei> <IMG id=IdImg src="" onanimationend="ImgChange()"> </TABLE>
JavaScript:
var SrcList=[
["Img/0.jpg","コメント0"],
["Img/1.jpg","コメント1"],
["Img/2.jpg","コメント2"],
["Img/3.jpg","コメント3"]
]
var SrcNum=0;
function ImgChange(){
IdImg.className="";
IdImg.src=SrcList[SrcNum][0];
IdImgTitle.innerHTML=SrcList[SrcNum][1];
setTimeout("ImgChange1()",1);
if(SrcNum < SrcList.length-1){
SrcNum++;
}else{
SrcNum=0;
}
}
function ImgChange1(){
IdImg.className="ImgAnime";
}