如何通過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>