How to set images background of div element via setInterval?

Question

I implemented an iterator for my array, but I need to put array[i] as the background image of a div element. My iteration process completes but the background image is not working. Can any experts solve this?

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

The issue with your code is that the syntax for setting the background image is incorrect. You need to use : to separate the key/value pair in an object. Alternatively, you can remove the braces and provide the values as separate parameters. The image URL should also be wrapped with url() .

Also, you can simplify the logic by using the modulo operator to cycle through the array, instead of resetting i to 0 every 10 seconds, which is unreliable at best. Try this:

 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> 

Finally, note that I added background-size: contain; to the CSS so that the background image is automatically resized to fit within the bounds of the div. In the original example you would not see the whole image at all.

Answer 2

As Rory McCrossan said you have invalid syntax for background image css. And you don't need to use two setInterval s and this must be controlled by assigning to a variable. which helps to stop iteration when required.

 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>