如何通过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()包装。

此外，您可以通过使用模运算符循环数组来简化逻辑，而不是每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> 

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

Answer 2

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

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

 .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>