CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#bg {
width: 100%;
height: 100%;
position: absolute;
background-image: url(http://i.imgur.com/U9hQk9k.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: background-image 0.5s ease;
-webkit-transition: background-image 0.5s ease;
}
JAVASCRIPT
var carousel = document.querySelector('#bg'),
time = 1500,
loopImg = -1,
myArray =
[
'http://i.imgur.com/HiaZsvV.jpg',
'http://i.imgur.com/pyiRNAP.jpg',
'http://i.imgur.com/U9hQk9k.jpg'
];
setInterval(function() {
++loopImg;
if ( loopImg >= myArray.length ) {
loopImg = 0;
}
carousel.style.backgroundImage = "url(" + myArray[loopImg] + ")";
}, time);
2 Responses