Question

我有一个数组，其中我存储了7个图像作为数字。我希望这些图像定期更改。但是，增量运算符似乎不起作用。请给我一个解决方案。

我的代码是

    $(document).ready(function(){
      var img_array = [1, 2, 3, 4, 5, 6, 7],
      i = 0;
      setInterval(function(){
         $('main').css('background-image', function(){
            for(i; i <= 7; i++){

            return( 'url(images/main-bg' + img_array[i] + '.jpg)');

         }

      });
     }, 5000);

  })

我得到的是＆＃34; images / main-bg1.jpg＆＃34;总是反对增加的图像，如＆＃34; main-bg2，main-bg3＆＃34;五秒钟后可能是什么问题？

Answer 1

您在url循环可以执行任何操作之前返回for。

这就是你需要的：

$(document).ready(function(){
    var img_array = [1, 2, 3, 4, 5, 6, 7],
    i = 0;
    setInterval(function(){
        $('main').css('background-image', function(){
            i = (++i % 7);
            return( 'url(images/main-bg' + img_array[i] + '.jpg)');
        });
    }, 5000);
})

“魔法”发生在i = (++i % 7);
每次间隔执行函数时，该行将i递增1，并在i时将1重置回6。（数组在JS中为零索引）

Answer 2

你的数组中有七个元素，你的计数器将循环八次0,1,2,3,4,5,6,7，条件是＆lt; = 7.这将导致你出现问题。< / p>

你也应该声明我，可能是在for循环而不是在外面，例如。

for (var i =0; i < 7; i++)

最后，你＆＃34;返回＆＃34;中环。

return( 'url(images/main-bg' + img_array[i] + '.jpg)');

这不起作用。

你可能想要的是：

$(document).ready(function(){
  var img_array = [1, 2, 3, 4, 5, 6, 7],
  var i = 0;
  setInterval(function(){
     $('main').css('background-image', function(){
        var img = 'url(images/main-bg' + img_array[i] + '.jpg)';
        i++;
        if ( i > 6) {
          i = 0;
        }
        return(img);
     }
  });
 }, 5000);

}）

Answer 3

你不需要使用for循环，只需在setInterval中增加i

$(document).ready(function(){
      var img_array = [1, 2, 3, 4, 5, 6, 7],
      i = 0;
      var len = img_array.length;
      setInterval(function(){
         $('main').css('background-image', function(){
            return( 'url(images/main-bg' + img_array[i] + '.jpg)');
         });
         //increment here
         i++;
         // if variable value equal to array length then reset 'i'
         if(i==len)i=0;
     }, 5000);

  });

Javascript中的递增运算符不会递增值

3 个答案: