javascript - 設定間隔後に画像属性を変更する

Question

3秒ごとに画像の特定のパラメータを変更して、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

実際にはそれらすべてをループしていますが、速すぎて見えません。あなたがしていることは、3 秒ごとに 10 個のオプションすべてをできるだけ速くループすることです。その後、3 秒間 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);