如何以间隔时间循环遍历对象以更改css属性答案

【问题标题】：how to loop through an object with an interval time to change a css property如何以间隔时间循环遍历对象以更改css属性
【发布时间】：2017-07-31 20:59:49
【问题描述】：

我正在尝试循环遍历一个 javascript 对象以每 3 秒将背景图像更改为其他图像。

我知道我将使用 setInterval，一个用于遍历对象的 for 循环和 jQuery 来访问 css 并更改背景。但我不确定如何一起使用所有这些

HTML

<div class="example"></div>

CSS

    .example {
  height: 600px;
  background-image: url(path/pic01.jpeg); }

  var header = {
pic01 : 'url(path/pic02.jpeg)',
pic02 : 'url(path/pic03.jpeg)',
pic03 : 'url(path/pic04.jpeg)',
pic04 : 'url(path/pic05.jpeg)'}

我试过了：

   var counter = 0;
   var i = setInterval(function(){


    counter++;
    if(counter === 5) {
        clearInterval(i);
    }
}, 3000);

和类似的东西。但我似乎无法完成它

for (var key in header) {
if (header.hasOwnProperty(key)) {
console.log(header[key]);

})

}

【问题讨论】：

你尝试了什么？
查看 JavaScript setTimout
The docs 用例子说明了一切......
我尝试了很多东西。我知道它背后的逻辑，我理解它。但我似乎无法让它工作。
我知道我将使用 setInterval，一个用于遍历对象的 for 循环和 jQuery 来访问 css 并更改背景。但我不确定如何一起使用所有这些

标签： javascript jquery for-loop javascript-objects

【解决方案1】：

为什么不使用 CSS？

html, body {
  position: relative;
  padding: 0;
  margin: 0;
}

html, body, .example {
  width: 100%;
  height: 100%;
}

.example {
  background-color: #333;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  animation-name: gallery;
  animation-duration: 12s;
  animation-timing-function: steps(1, start);
  animation-iteration-count: infinite;
}

@keyframes gallery {
  0%, 100% {
    background-image: url(https://placebear.com/145/201)
  }
  25% {
    background-image: url(https://placebear.com/395/205)
  }
  50% {
    background-image: url(https://placebear.com/150/200)
  }
  75% {
    background-image: url(https://placebear.com/145/300)
  }
}

&lt;div class="example"&gt;&lt;/div&gt;

【讨论】：

这比javascript解决方案好。

【解决方案2】：

首先，为标题图像使用一个数组，这样会更容易一些。下面是两个函数，它们将无限循环，一旦达到数组的长度，从 0 索引开始，另一个将循环数组一次，直到所有元素都显示一次。（您需要根据需要对其进行调整，而不是将文本写入 div...）

var header = [
  'url(path/pic02.jpeg)',
  'url(path/pic03.jpeg)',
  'url(path/pic04.jpeg)',
  'url(path/pic05.jpeg)'
];
var i = 0;

function loopInfinite(arr) {
  document.getElementById('foo').innerHTML = arr[i];
  i++;
  if (i === arr.length) i = 0;
  setTimeout(() => {
    loopInfinite(arr);
  }, 500);
}

function loopOnce(arr) {
  document.getElementById('foo').innerHTML = arr[i];
  i++;
  if (i < arr.length) {
    setTimeout(() => {
      loopOnce(arr);
    }, 500);
  }
}


loopInfinite(header);

&lt;div id="foo"&gt;&lt;/div&gt;

【讨论】：

【解决方案3】：

在这个代码块中：

var counter = 0;
   var i = setInterval(function(){


    counter++;
    if(counter === 5) {
        clearInterval(i);
    }
}, 3000);

您没有包含您的后台更新代码。像这样的东西可能是您正在寻找的东西：

var imageNumber = 0;
var counter = 0;
   var i = setInterval(function(){

    counter++;
    if(counter === 5) {

        // your background-updating code
        $('.example').css('background-image',headers['pic0' + imageNumber]);
        imageNumber++;
        if (imageNumber > headers.length) {
          imageNumber = 0;
        }


        clearInterval(i);
    }
}, 3000);

【讨论】：