[英]Loop 3 images from my Div background-image Property
I have a code to loop images but based on an Img source, but how to improve it to make it work for the "background-image" property of a div? 我有一个代码来循环图像,但是基于Img源,但是如何改进它以使其适用于div的“ background-image”属性?
HTML 的HTML
<div id="section2"></div>
CSS 的CSS
#section2 {
background-image: 'url(..images/banner1.jpg');
}
JAVASCRIPT 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>
Thanks in Advance :) 提前致谢 :)
One way would be to use CSS classes instead of sources. 一种方法是使用CSS类而不是源。
JS: 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: 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');
}
Note: 注意:
Use el.className += ' ' + classes[i];
使用el.className += ' ' + classes[i];
to append a class name instead of replacing all element classes. 附加一个类名而不是替换所有元素类。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.