我试图每秒更改一张背景图像。我有四张背景图像并且能够更改它们,但是,每 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);
最佳答案
在你的代码中它不应该做任何事情
$('.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);
关于javascript - 每秒更改背景图像 jQuery javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38460027/