JSFiddle - React, Tailwind, and code Playground

by danzkusuma

HTML

<body>
    <header>
    </header>
</body>

CSS

body {
    margin: 0;
}
header {
    height: 665px;
    width: 100%;
    background-image: url('http://www.extremetech.com/wp-content/uploads/2012/12/Audi-A1.jpg');
    -moz-transition: background-image 1s ease-in-out;
    -webkit-transition: background-image 1s ease-in-out;
    -ms-transition: background-image 1s ease-in-out;
    -o-transition: background-image 1s ease-in-out;
}

JavaScript

function preloadImages(array) {
if (!preloadImages.list) {
    preloadImages.list = [];
 }
 for (var i = 0; i < array.length; i++) {
    var img = new Image();
    img.src = array[i];
    preloadImages.list.push(img);
 }
 }
    var imageURLs = [
        "http://2.bp.blogspot.com/-DXumDyjcLf4/USyuoPUXYRI/AAAAAAAAASw/-TNzVUSDAcE/s1600/American-cars-Camaro-convertible_car.jpg",
        "http://best3dhdwallpapers.com/wp-content/uploads/2013/09/Renault-Alpine-Car-Wallpapers-Pictures-Photos.jpg"
    ];
 preloadImages(imageURLs);
    var counterForBackgroundImage = -1;
 function changeBackgroundImage() {
counterForBackgroundImage++;
if (counterForBackgroundImage > imageURLs.length-1)
    counterForBackgroundImage = 0;
$('header').css('background-image', 'url(' + imageURLs[counterForBackgroundImage] + ')');
 setTimeout(function() {
    changeBackgroundImage();
 }, 5000);
 }
 changeBackgroundImage();