下面是我的代码,在这张1到15的图片中,这张图片一一加载到15,然后在指定的时间间隔内从1到15重新开始。按此顺序,当页面加载时,图像会无限播放,但是我希望图像在页面加载时只能一次播放。
而且我无法修复此错误,请帮助我解决该问题。
onload = function startAnimation() {
var frames = document.getElementById("animation").children;
var frameCount = frames.length;
var i = 0;
setInterval(function () {
frames[i % frameCount].style.display = "none";
frames[++i % frameCount].style.display = "block";
}, 100);
}
#animation img {
display: none;
}
#animation img:first-child {
display: block;
}
<div id="animation">
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging01.png">
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging02.png">
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging03.png">
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging04.png">
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging05.png">
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging06.png">
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging07.png">
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging08.png">
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging09.png">
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging10.png">
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging11.png">
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging12.png">
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging13.png">
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging14.png">
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging15.png">
</div>
最佳答案
@pratik,这应该可以帮助您:
您应该使用clearInterval
如下所示:
if(j === 15) {
clearInterval(interval);
}
例
onload = function startAnimation() {
var animDiv = document.getElementById('animation');
var x = document.createElement("IMG");
x.setAttribute("id", 'test');
x.setAttribute("src",
"http://jumpingfishes.com/dancingpurpleunicorns/charging01.png");
animDiv.appendChild(x);
var i = 1,
j = 2;
var interval = setInterval(function () {
var 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++;
if (j === 16) {
clearInterval(interval);
}
}, 100);
}
#animation img {
display: none;
}
#animation img:first-child {
display: block;
}
<div id="animation">
</div>