Question

我有一个简单的JS脚本，它接受一组图像并通过单击开始按钮将它们显示为动画。我试图通过单击停止按钮（停止在动画的当前图像上）停止动画，这不起作用。

我将不胜感激任何帮助。感谢

<script type="text/javascript">
var images = new Array("unc_prop_1dim_x1.jpg", "unc_prop_1dim_x2.jpg",
"unc_prop_1dim_x3.jpg", "unc_prop_1dim_x4.jpg", "unc_prop_1dim_x5.jpg");

var nextImage = 0;  //Index for nextImage
var timeout = 400;  //In milliseconds

function animation() {
    document.ani.src = images[nextImage];
    nextImage++;

    if (nextImage==images.length) {
    nextImage = 0;
    }
    setTimeout("animation();", timeout);

};
function stopAnimation() {
    ani.stop();
}
document.querySelector('#stop').onclick = function() {
stopAnimation();
};
</script>

<body>
<div id="main" style="width: 700px; height: 500px;">
<img src="unc_prop_1dim_x1.jpg" name="ani"/>
</div><br>
<input type="button" id="start" onclick="animation();" value="Start  Animation">
<input type="button" id="stop" value="Stop!">
</body>

如何停止或暂停JavaScript动画？

0 个答案: