Javascript setInterval（）更改图像

几周前发现了这个网站，这是一个检查我们网站的好地方 各种各样的代码，学到了很多

我刚刚开始学习一门网络编程课程，我想我的知识遇到了一些问题

目标：加载页面时，显示图像andy_black.jpg。两秒钟后，将图像源和浏览器中的图像更改为另一个名为andy_white.jpg的图像。这将每2秒来回改变一次

我签出了这篇文章：

（我也用标签[javascript][function]和单词“setinterval”搜索了其他，但大多数都使用jQuery，我的意图是不使用任何jQuery，毕竟这是一个javascript实验）

这对我在阅读之前的代码很有帮助，因为我的代码要长得多，并且在setInterval（）函数中没有调用该函数

下面是一些代码： 建议？ 谢谢大家，喜欢它：）

var i=1；
函数更改_pic（）{
i+1；
如果（i==5）{
i=1；
}
//我怀疑电脑会把I读作5
//恢复到1之前的一小段时间
//我怀疑这可能会导致进一步的问题，但是
//这是当前问题的根源吗？
如果（i==1 | | i==2）{
document.getElementById（'img_to_flip'）.src=“andy_black.jpg”；
}
否则{
document.getElementById（'img_to_flip'）.src=“andy_white.jpg”；
}
}
var pic_src=设定间隔（change_pic，2000）；

您忘记实际将新值重新分配给

i

或使用：

i = i + 1;

或

还有，当你只有两个州时，为什么要数到五？具有自动重置计数器的常见范例是使用模运算：

i = (i + 1) % 2;

它保证

i

将只具有

0

或

1

的值

FWIW，这里有一种编写整个功能的替代方法，它适用于任意数量的图像-只需填充

pics

数组：

(function() {     // function expression closure to contain variables
    var i = 0;
    var pics = [ "andy_white.jpg", "andy_black.jpg" ];
    var el = document.getElementById('img_to_flip');  // el doesn't change
    function toggle() {
        el.src = pics[i];           // set the image
        i = (i + 1) % pics.length;  // update the counter
    }
    setInterval(toggle, 2000);
})();             // invoke the function expression

---

i+1不起作用。它应该是
i=i+1或只是
i++别忘了在google chrome或其他现代浏览器的“Web Inspector”上调试代码。（大多数浏览器点击F12…）啊，非常感谢你们！这是有道理的。另外，很抱歉没有发布错误控制台告诉我的内容-在这种情况下，这碰巧是无关紧要的，但我想我不应该遗漏这些信息。再次感谢你们，非常有帮助。
i = (i + 1) % 2;

(function() {     // function expression closure to contain variables
    var i = 0;
    var pics = [ "andy_white.jpg", "andy_black.jpg" ];
    var el = document.getElementById('img_to_flip');  // el doesn't change
    function toggle() {
        el.src = pics[i];           // set the image
        i = (i + 1) % pics.length;  // update the counter
    }
    setInterval(toggle, 2000);
})();             // invoke the function expression