Javascript 图像序列动画仅加载一次，而不是无限次加载

下面是我的代码，在这个1到15的图像和这个图像加载一个接一个到15，并再次开始从1到15在特定的时间间隔。在这个序列中，当页面加载时图像无限播放，但我希望页面加载时图像只播放一次。 我无法修复这个错误，请帮助我解决这个问题

onload=函数startAnimation（）{
var frames=document.getElementById（“动画”）.children；
var frameCount=frames.length；
var i=0；
setInterval（函数（）{
帧[i%frameCount].style.display=“无”；
帧[++i%frameCount].style.display=“block”；
}, 100); 
}

#动画img{
显示：无；
}
#动画img：第一个孩子{
显示：块；
}

---

您应该使用

clearInterval（）


onload=函数startAnimation（）{
var frames=document.getElementById（“动画”）.children；
var frameCount=frames.length；
var i=0；
var myInterval=setInterval（函数（）{
if（i==frameCount-2）{
clearInterval（myInterval）；
}
帧[i%frameCount].style.display=“无”；
帧[++i%frameCount].style.display=“block”；
}, 100); 
}
#动画img{
显示：无；
}
#动画img：第一个孩子{
显示：块；
}
您应该使用
clearInterval（）


onload=函数startAnimation（）{
var frames=document.getElementById（“动画”）.children；
var frameCount=frames.length；
var i=0；
var myInterval=setInterval（函数（）{
if（i==frameCount-2）{
clearInterval（myInterval）；
}
帧[i%frameCount].style.display=“无”；
帧[++i%frameCount].style.display=“block”；
}, 100); 
}
#动画img{
显示：无；
}
#动画img：第一个孩子{
显示：块；
}
一旦你想让间歇停止运行，就必须清除间歇。使用
clearInterval（）

检查此示例：

请注意，
intervalEnd
是一个数字，一旦
i
到达它，它将清除您的间隔


onload=函数startAnimation（）{
var frames=document.getElementById（“动画”）.children；
var frameCount=frames.length；
var i=0；
var intervalEnd=100；
var intervalId=setInterval（函数（）{
帧[i%frameCount].style.display=“无”；
帧[++i%frameCount].style.display=“block”；
如果（i>=intervalEnd）
clearInterval（有效期间）
}, 100); 
}
#动画img{
显示：无；
}
#动画img：第一个孩子{
显示：块；
}
一旦你想让间歇停止运行，就必须清除间歇。使用
clearInterval（）

检查此示例：

请注意，
intervalEnd
是一个数字，一旦
i
到达它，它将清除您的间隔


onload=函数startAnimation（）{
var frames=document.getElementById（“动画”）.children；
var frameCount=frames.length；
var i=0；
var intervalEnd=100；
var intervalId=setInterval（函数（）{
帧[i%frameCount].style.display=“无”；
帧[++i%frameCount].style.display=“block”；
如果（i>=intervalEnd）
clearInterval（有效期间）
}, 100); 
}
#动画img{
显示：无；
}
#动画img：第一个孩子{
显示：块；
}
@pratik，这将帮助您：
您应该像下面那样使用
clearInterval
：

if(j === 15) {
  clearInterval(interval);
}

范例


onload=函数startAnimation（）{
var animDiv=document.getElementById（'animation'）；
var x=document.createElement（“IMG”）；
x、 setAttribute（“id”，“test”）；
x、 setAttribute（“src”，
"http://jumpingfishes.com/dancingpurpleunicorns/charging01.png");
附肢动物（x）；
var i=1，
j=2；
var interval=setInterval（函数（）{
变量y=（i<10）？“0”+i.toString（）：i.toString（），
z=（j<10）“'0'+j.toString（）：j.toString（），
url=document.getElementById（'test'）.src；
document.getElementById（'test'）.src=url.replace（y，z）；
i++；
j++；
如果（j==16）{
间隔时间；
}
}, 100);
}
#动画img{
显示：无；
}
#动画img：第一个孩子{
显示：块；
}
@pratik，这将帮助您：
您应该像下面那样使用
clearInterval
：

if(j === 15) {
  clearInterval(interval);
}

范例


onload=函数startAnimation（）{
var animDiv=document.getElementById（'animation'）；
var x=document.createElement（“IMG”）；
x、 setAttribute（“id”，“test”）；
x、 setAttribute（“src”，
"http://jumpingfishes.com/dancingpurpleunicorns/charging01.png");
附肢动物（x）；
var i=1，
j=2；
var interval=setInterval（函数（）{
变量y=（i<10）？“0”+i.toString（）：i.toString（），
z=（j<10）“'0'+j.toString（）：j.toString（），
url=document.getElementById（'test'）.src；
document.getElementById（'test'）.src=url.replace（y，z）；
i++；
j++；