JSFiddle - React, Tailwind, and code Playground

by alleks

HTML

<div class="image-container"></div>

JavaScript

(function(){
    var datas = [
        {
            'image': "http://i.imgur.com/1fWTOIj.png",
            'url': "http://google.com",
        },
        {
            'image': "http://i.imgur.com/AhWrnN4.gif",
            'url': "http://youtube.com",
        },
    ]

    var currentIndex = datas.length-1;
        changeBanner = function(){
            if(currentIndex == 0){
                $(".banner-fade-img").fadeIn();
                currentIndex = datas.length-1;
            } else {
                $($(".banner-fade-img").get(currentIndex)).fadeOut();
                currentIndex--;
            }
        }
    console.log(currentIndex);

    var bannerSetup = function(){
        $.each(datas, function(index, src) {
            $(".image-container").append(
                '<a href="' + src.url + '">'
            +'<img class="banner-fade-img" width="150" height="150" src="' + src.image + '">'
                +'</a>'
            );
        })
        window.setInterval(changeBanner, 5000);
    }

    bannerSetup();
}())