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()。

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

＆＃13;

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);
});

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

正如Rory McCrossan所说，background image css语法无效。并且您不需要使用两个setInterval，这必须通过分配变量来控制。这有助于在需要时停止迭代。

＆＃13;

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;
var interval;

function iterate() {
  interval = setInterval(function() {
    //$('.frame-div').html(imgobj[i]);
    $('.frame-div').css({'background': 'url(' + imgobj[i] + ')'});
    i = i >= imgobj.length ? 0 : i + 1; 
  }, 2000);

}
$(document).ready(function() {
  iterate();
  
  //to stop iteration
  //clearInterval(interval)
});

＆＃13;

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

＆＃13;

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

＆＃13;

如何通过setInterval设置div元素的图像背景？

2 个答案: