実行結果:
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"; }