如何通過setInterval設置div元素的圖像背景？

我爲我的數組實現了一個迭代器，但我需要將array[i]作爲div元素的背景圖像。我的迭代過程完成，但背景圖像不起作用。任何專家能解決這個問題嗎如何通過setInterval設置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>

來源

2017-04-19 Samudrala Ramu

如果給予適當的圖片網址，將工作imgobj的 – abhiklpm

雅陣列= [------]。 –

我已經給出了正確的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>

最後請注意，我說background-size: contain;的CSS使背景圖像會自動調整大小以適應div的範圍內。在原始示例中，您根本看不到整個圖像。

來源

2017-04-19 12:34:36

imgobj [i％imgobj.length]你能解釋一下這種語法嗎我是新的這種類型的腳本 –

其工作正常 –

在這裏你去：https://developer.mozilla.org/en/ docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators＃Remainder_（） –

正如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>

來源

2017-04-19 12:40:41

尼斯解答其工作正常。 –

如何通過setInterval設置div元素的圖像背景？

回答

相關問題