Loop 3 images from my Div background-image Свойство

Question

У меня есть код для создания образов, но на основе источника Img, но как его улучшить, чтобы заставить его работать для свойства «background-image» div?

HTML

<div id="section2"></div> 

CSS

#section2 { 
background-image: 'url(..images/banner1.jpg'); 
} 

JAVASCRIPT

<script type = "text/javascript"> 
(function() {  
var i = 1; 
var pics = [ "images/banner1.jpg", "images/banner2.jpg", "images/banner3.jpg" ]; 
var el = document.getElementById('section2'); 
function toggle() { 
    el.src = pics[i];   
    i = (i + 1) % pics.length; 
} 
setInterval(toggle, 3000); 
})();    
    </script> 

Заранее спасибо :)

Answer 1

Одним из способов было бы использовать классы CSS вместо источников.

JS:

<script type = "text/javascript"> 
(function() {  
var i = 1; 
var classes = [ "bgd-1", "bgd-2", "bgd-3" ]; // adjusted 
var el = document.getElementById('section2'); 
function toggle() { 
    el.className = classes[i]; // adjusted   
    i = (i + 1) % classes.length; // adjusted 
} 
setInterval(toggle, 3000); 
})();    
</script> 

CSS:

#section2.bgd-1 { 
    background-image: url('..images/banner1.jpg'); 
} 

#section2.bgd-2 { 
    background-image: url('..images/banner2.jpg'); 
} 

#section2.bgd-3 { 
    background-image: url('..images/banner3.jpg'); 
} 

Примечание:

Используйте el.className += ' ' + classes[i];, чтобы добавить имя класса вместо того, чтобы заменить все классы элементов.