編集:2021.09.01 by T.A.

実行結果:


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";
}