javascript - 如何通过setInterval设置div元素的图片背景？

Question

我为我的数组实现了一个迭代器，但我需要将 array[i] 作为 div 元素的背景图像。我的迭代过程已完成，但背景图像不起作用。有高手能解决吗？

//var imgobj = ['https://www.w3.org/html/logo/downloads/HTML5_Logo_512.png','https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTWOZVcvYs5dunAY_vSMxvFNKOvLWbn3RkHUM8SEU1cci9kNJEG','http://www.adservio.fr/img/logos2/jquery.jpg','https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSKaIDe-P2BzZgWQLEOBo-LOTqduyPmBaRKhh0XcNG64fOTsm9e9A','http://www.unixstickers.com/image/data/stickers/python/python.sh.png'];

var imgobj1 = ['IMG1', 'IMG2', 'IMG3', 'IMG4', 'IMG5'];
var i = 0;

function iterate() {
  setInterval(function() {
    $('.frame-div').html(imgobj1[i]);
    //$('.frame-div').css({'background',imgobj[i]});
    i++
  }, 2000);

}
$(document).ready(function() {
  iterate();
  setInterval(function() {
    i = 0;
  }, 10000);

});

.frame-div {
  width: 300px;
  height: 300px;
  border: 1px solid #c1dbff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="frame-div"></div>

Answer 1

您的代码的问题是设置背景图像的语法不正确。您需要使用 : 来分隔对象中的键/值对。或者，您可以删除大括号并将值作为单独的参数提供。图片 URL 也应该用 url() 包裹起来。

此外，您可以通过使用模运算符循环遍历数组来简化逻辑，而不是每 10 秒将 i 重置为 0，这充其量是不可靠的.试试这个:

var imgobj = ['https://www.w3.org/html/logo/downloads/HTML5_Logo_512.png', 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTWOZVcvYs5dunAY_vSMxvFNKOvLWbn3RkHUM8SEU1cci9kNJEG', 'http://www.adservio.fr/img/logos2/jquery.jpg', 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSKaIDe-P2BzZgWQLEOBo-LOTqduyPmBaRKhh0XcNG64fOTsm9e9A', 'http://www.unixstickers.com/image/data/stickers/python/python.sh.png'];
var i = 0;

function iterate() {
  $('.frame-div').css('background-image', 'url("' + imgobj[i % imgobj.length] + '")');
  i++;
}

$(document).ready(function() {
  iterate();
  setInterval(iterate, 2000);
});

.frame-div {
  width: 300px;
  height: 300px;
  border: 1px solid #c1dbff;
  background-size: contain;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="frame-div"></div>

最后，请注意，我在 CSS 中添加了 background-size: contain; 以便背景图像自动调整大小以适应 div 的边界。在原始示例中，您根本看不到整个图像。