javascript - 每秒更改背景图像 jQuery javascript

Question

我试图每秒更改一张背景图像。我有四张背景图像并且能够更改它们，但是，每 4 回合就会显示 2 张图像。我无法弄清楚如何解决这个问题的逻辑。

我当前的代码如下所示。

HTML

<img class="img-1" src="one.jpg">
<img class="img-2" src="two.jpg">
<img class="img-3" src="three.jpg">
<img class="img-4" src="four.jpg">

JS

var x = 0,
homepageImages = ["1","2","3","4"];
setInterval(function(){ 
  x++;
  if(x === 4){
      x = 0;
  }  
     $('.img-' + homepageImages[x]).css('display', 'block');
     $('.img-' + (homepageImages[x] - 1)).css('display', 'none');
}, 1000);

Answer 1

在你的代码中它不应该做任何事情

$('.img-' + homepageImages[x]).css('display', 'block');  <-- you show it
$('.img-' + (homepageImages[x])).css('display', 'none');  <-- you hide it

因为您显示和隐藏相同的图片。

我猜你删除了 -1 。在这种情况下，而不是处理它包装和当然的情况0-1将是-1 ，先隐藏图像，然后再添加。

var x = 0,
homepageImages = ["1","2","3","4"];
setInterval(function(){ 
  $('.img-' + homepageImages[x]).css('display', 'none');  //hide the active one first
  x++;
  if(x === 4){
      x = 0;
  }  
  $('.img-' + homepageImages[x]).css('display', 'block');  //show the next one
}, 1000);