Question

我看过很多类似的问题，但找不到解决方法。我有一个bootstrap jumbotron和一组3个图像，每隔10秒循环一次。问题是第一个网址直到前10秒才显示。阵列完成后图像正确播放，只有在第一次加载时图像为空白。我已经尝试通过CSS和JQuery设置背景图像，但在加载第一个图像时仍然遇到跳过的问题。

守则

var jumbotronBG = ['/image1.jpg', '/image2.jpg', '/image3.jpg'];
var changeImage = $(".jumbotron");
  var i = 0;
 
setInterval(function() {
  changeImage.css({'background-image': 'url(' + jumbotronBG[i] + ")"});
      i = i + 1;
      if (i == jumbotronBG.length) {
        i =  0;
      }
}, 10000);

<div class="jumbotron">


</div>

当页面加载时，只需要找到一种循环所有3个图像的方法，其中拳头是image1.jpg。

Answer 1

除了没有在加载时调用background-image更改外，我没有看到任何错误？更改了JavaScript代码以解决此问题：

var jumbotronBG = ['https://placehold.it/100x100', 'https://placehold.it/200x200', 'https://placehold.it/300x300'];
var changeImage = $(".jumbotron");
var i = 0;

function cycleImage() {
  changeImage.css({
    'background-image': 'url(' + jumbotronBG[i] + ")"
  });
  i = i + 1;
  if (i == jumbotronBG.length) {
    i = 0;
  }
}

setInterval(cycleImage, 1000);
cycleImage();

This JSFiddle按预期正常工作吗？

每10秒旋转一次背景图像网址

1 个答案: