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

因为你正在显示和隐藏相同的img。

我的猜测是你删除了-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);

Answer 2

刚刚编辑了你的代码试试这个：

使用'=='而不是'==='，因为tripple equals会检查类型; 以前也不要增加。因为javascript数组从索引0开始而增加记住homepages数组是一个使用'x===4'的字符串数组将返回false 并且homepages[0] == '1'如此增加之前不会给你第一张图像

<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">

var x = 0;
var 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');
     x++;
}, 1000);

每秒更改背景图像jQuery javascript

2 个答案: