javascript - 从我的 Div background-image 属性中循环 3 个图像

Question

我有一个循环图像的代码，但基于 Img 源，但如何改进它以使其适用于 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]; 附加一个类名而不是替换所有元素类。