每 10 秒旋转背景图像 url

Question

我见过很多类似的问题，但找不到解决方案。我有一个 bootstrap 超大屏幕和一组 3 张图像，每 10 秒循环一次。问题是第一个 url 直到前 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 秒旋转背景图像 url

Rotate background-image url every 10 seconds

jquery

css

arrays

loops

cycle