setInterval，动画多个图像，停止setInterval

Question

我需要使用DHTML / Javascript创建一些动画，我正在努力获得我的工作。我的参数是必须使用setInterval函数，用户定义的函数和8个jpg文件。还必须有一种停止动画的方法。

如果有人能让我指向正确的方向，我会非常高兴。到目前为止，我还没有找到关于如何做到这一点的合适信息，我仍然是Javascript的新手。感谢。

很抱歉没有提前发布代码。这是一团糟，我不想让自己难堪。这就是我所拥有的。它不起作用。

var slideShow = ['images/pic0.jpg','images/pic1.jpg','images/pic2.jpg','images/pic3.jpg','images/pic4.jpg','images/pic5.jpg','images/pic6.jpg','images/pic7.jpg'];
picO = new Array();
for(i=0; i < slideShow.length; i++) {
picO[i] = new Image();
picO[i].src = slideShow[i];
}
var curPic = -1;
function changeImage(){
curPic = (++curPic > slideShow.length-1)? 0 : curPic;
imgO.src = picO[curPic].src;
setInterval(changeImage,100);
}
window.onload=function(){
imgO = document.getElementById("imgAnim");
changeImage();
}

var t=setTimeout(function(){alert("Welcome to my animated page")},3000)

它需要做的另一件事是在动画开始后3秒弹出警告框。它正在这样做，但它每隔3秒就出现一次，这不是我想要的。

到目前为止，感谢您的帮助。最近我的Javascript工作做得很好但是这个只是我不熟悉的东西。

Answer 1

使用setInterval并停止动画

var animation = setInterval(yourAnimation,500); // run yourAnimation every 500ms
clearInterval(animation); // stop animation

动画

var slideShow = ["img1.jpg","img2.jpg", ... ,"img8.jpg"];
var counter = 0;
function yourAnimation() {someImage.src = slideShow[++counter%slideShow.length];}