javascript - 在设定的时间间隔后更改图像属性

Question

我试图每 3 秒更改一次图像中的某个参数，以便每三秒后它将循环通过 0、1、2、3、4、5、6、7、8、9。我在页面加载时显示所有 0，然后通过设定的超时时间更改属性。数字从 0 跳到 9 然后根本不动

这是我的js

var linkCons = "http://soumghosh.com/otherProjects/Numbers/";

setInterval(function() {
    for(var i = 0; i< 10; i++){
        $('.nine').attr('src',linkCons + "nw" + i + ".png")
    }
}, 3000);

这是我的小提琴 http://jsfiddle.net/sghoush1/AZe9b/2/

Answer 1

它实际上是循环遍历它们，只是太快了，你看不到。您正在做的是每三秒钟它会尽快循环所有 10 个选项。然后它在 9 上停留三秒钟并重复。您应该有一个计数器变量并执行以下操作：

    var linkCons = "http://soumghosh.com/otherProjects/Numbers/";
    var count = 0;
    setInterval(function() {
        $('.nine').attr('src',linkCons+"nw"+count+".png");
        count++;
        if (count > 9)
        {
            count = 0;
        }
    }, 3000);

Answer 2

这是我的解决方案。

 var linkCons = "http://soumghosh.com/otherProjects/Numbers/";
 var i = 0;
 setInterval(function() {
    $('.nine').attr('src', linkCons + "nw" + ((i === 10) ? i = 0 : (i++)) +".png");    
 }, 3000);

Answer 3

小提琴演示

var linkCons = "http://soumghosh.com/otherProjects/Numbers/";
var i = 0;
setInterval(function () {
    $('.nine').attr('src', linkCons + "nw" + i+++".png");
    if(i === 10)  i = 0 ;
}, 3000);