JSFiddle - React, Tailwind, and code Playground

by Shamil Ismail

HTML

<body>
    <div id="background">.
    </div>
    <p>hello world</p>   
</body>

CSS

#background {
   background-image: url("http://proglive.ru/media/img/site_100m.png");
    opacity: 1;
    margin: 0;
    padding: 0;
    z-index: -1;
    position: absolute;
    width: 1500px;
    height: 1200px;
    background-color: #07F;
}

JavaScript

//Предварительная загрузка 
$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}
var images = Array("http://proglive.ru/media/img/site_100m.png",
                   "http://proglive.ru/media/img/iphones.png",
                   "http://proglive.ru/media/img/boxes/girl.png",
                   "http://proglive.ru/media/img/boxes/boy.png");

$(images).preload();

//запуск

var currimg = 0;

$(document).ready(function(){
    (function loadimg(){
        //if(currimg > images.length-1){
            //currimg=0;
        //} //вместо if можно взять остаток от деления
        currimg = (currimg+1) % images.length;
        var newimage = images[currimg];
        $('#background')
            //непрозрачность -> 0.2           
            .animate({ opacity: 0.2 }, 1100,function(){
              //переключаем фон по завершении
              $(this).css("background-image", "url("+newimage+")")
            })
            //непрозрачность обратно -> 1
            .animate({ opacity: 1 }, 1400);
        //зациклим эту функцию
        setTimeout(loadimg,5000);
     })();
});