每 10 秒旋转一次背景图片 url答案

【问题标题】：Rotate background-image url every 10 seconds每 10 秒旋转一次背景图片 url
【发布时间】：2016-06-06 22:04:09
【问题描述】：

我见过很多类似的问题，但找不到解决方案。我有一个引导 jumbotron 和一组 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。

【问题讨论】：

changeImage.css({'background-image': 'url(' + mainIndexGif[i] + ')'});是当前使用的刻度/引号
只需将.css 文件中.jumbotron 的css 设置为background-image: url(/image1.jpg)，然后页面加载时它将成为第一张图片，然后将间隔从2 开始作为第一张图片页面加载后的时间。
只是出于好奇：既然你用的是Bootstrap，那你为什么不用Bootstrap的carousel呢？我认为您可以将 html 添加到每个项目中，以便您可以为每个元素设置背景图像。您可以使用选项调整转换之间的时间。

标签： jquery css arrays loops cycle

【解决方案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 工作正常吗？

【讨论】：

你完全正确@leroydev。谢谢你。不敢相信我错过了。