使用Javascript图像数组倒计时

所以我尝试用我的3张图片3，2，1来创建一个基本的倒计时，但是在每一步之间有2秒的间隔。我在那里有一个控制台日志，以查看当我执行脚本时，它们是否会执行。所以现在我只需要在两者之间留出2秒的间隔。。。这就是我被卡住的原因。帮助我现在使用的方法是，它等待2秒钟，然后启动整个代码，而不是在每段代码之间等待

var numImgCont = [];
numImgCont[0] = "./imgs/3.jpg";
numImgCont[1] = "./imgs/2.jpg";
numImgCont[2] = "./imgs/1.jpg";

apples = function(){

    setTimeout(
        function(){
            for (var i = 0; i <= 2; i++) {  
            console.log(numImgCont[i])
            document.getElementById("imgcontainer").src =numImgCont[i]; 
        };

    }, 500);

}

示例：在imgcontainer元素后运行window.onload或onDOMReady或inline：

稍有不同的方法：

var numImgCont = [];
numImgCont[0] = "http://placehold.it/200x200";
numImgCont[1] = "http://placehold.it/300x300";
numImgCont[2] = "http://placehold.it/400x400";

var apples = (function run(){
    var container = document.getElementById("imgcontainer");

    return (function loop(){
        setTimeout(function(){
            if (numImgCont.length) {
                container.src = numImgCont.shift();
                loop();
            }
        }, 2000);

        return loop;
    })();

})();

---

您可以使用IEFE立即调用函数表达式和setTimeout

---

试着用setInterval代替。你能把你试过的添加到JSFIDLE吗？谢谢。他们真的很有帮助。只是因为我没想过要这样做而感到沮丧。我不明白的是ifnumgcont.length是否意味着如果numgcont是3？.Array.prototype.length给出了数组中当前的项数。Array.prototype.shift从列表中取出第一项并返回它。因此，检查length属性会告诉您数组中还剩下多少项，因此它会一直工作，直到所有项都被移开并且numgcont.length给出0。它跳过[2]数组的原因是什么？var numgcont=[]；numigcont[0]=./imgs/3.jpg；nummgcont[1]=./imgs/2.jpg；nummgcont[2]=./imgs/1.jpg；nummgcont[3]=/imgs/ninja.jpg；var countDown=函数循环{setTimeoutfunction{if numigcont.length{document.getElementByIdimgcontainer.src=numigcont.shift；循环；}；}，2000；返回循环；}；

var numImgCont = [];
numImgCont[0] = "http://placehold.it/200x200";
numImgCont[1] = "http://placehold.it/300x300";
numImgCont[2] = "http://placehold.it/400x400";

var apples = (function run(){
    var container = document.getElementById("imgcontainer");

    return (function loop(){
        setTimeout(function(){
            if (numImgCont.length) {
                container.src = numImgCont.shift();
                loop();
            }
        }, 2000);

        return loop;
    })();

})();

var container = document.getElementById('imgcontainer'),
    images = ['src1', 'src2', 'src3'];

(function show() {
    container.src = images.shift();
    images.length && setTimeout(show, 2000);    
}());