JSFiddle - React, Tailwind, and code Playground

by Christian Bonato

JavaScript

//Preload images first 
    $.fn.preload = function() {
        this.each(function(){
            $('<img/>')[0].src = this;
        });
    }
    $.fn.preload = function() {
        this.each(function(){
            $('<img/>')[0].src = this;
        });
    }
    var images = Array("http://upload.wikimedia.org/wikipedia/commons/1/16/Appearance_of_sky_for_weather_forecast,_Dhaka,_Bangladesh.JPG", "http://upload.wikimedia.org/wikipedia/commons/8/81/Sky_over_Washington_Monument.JPG", "http://pplus.in.ua/uploads/posts/2014-10/1414742119_pasmur_1.jpg");

    $([images[0],images[1],images[2]).preload();

    // Usage:

    var currimg = 0;

    $(document).ready(function(){

        function loadimg(){

           $('#background').animate({ opacity: 1 }, 500,function(){

                //finished animating, minifade out and fade new back in           
                $('#background').animate({ opacity: 0.7 }, 500,function(){

                    currimg++;

                    if(currimg > images.length-1){

                        currimg=0;

                    }

                    var newimage = images[currimg];

                    //swap out bg src                
                    $('#background').css("background-image", "url("+newimage+")"); 

                    //animate fully back in
                    $('#background').animate({ opacity: 1 }, 500,function(){

                        //set timer for next
                        setTimeout(loadimg,7500);
                    });
                });
            });
         }
         setTimeout(loadimg,9000);

    });
    </script>

    <script type="text/javascript">

    $(document).ready(function(){
    var divs = $('div[id^="content"]').hide(),
        i = 0;

    function cycle() {
        $("#displayArea").html(divs.eq(i).html());
        i = ++i % divs.length; // increment i, and reset to 0 when it equals divs.length
    }

    setInterval(cycle, 9000);

    });