JSFiddle - React, Tailwind, and code Playground

by apoucoz

HTML

<div id="garland" class="garland_4">
    <div id="nums_1">1</div>
</div>

CSS

#garland {
    position:absolute;
    top:0;
    left:0;
    background-image:url('http://imapo.ru/img/christmas-lights.png');
    height:36px;
    width:100%;
    overflow:hidden;
    z-index:99
}
#nums_1 {
    padding:100px
}
.garland_1 {
    background-position: 0 0
}
.garland_2 {
    background-position: 0 -36px
}
.garland_3 {
    background-position: 0 -72px
}
.garland_4 {
    background-position: 0 -108px
}

JavaScript

function garland() {
    nums = document.getElementById('nums_1').innerHTML
    if (nums == 1) {
        document.getElementById('garland').className = 'garland_1';
        document.getElementById('nums_1').innerHTML = '2'
    }
    if (nums == 2) {
        document.getElementById('garland').className = 'garland_2';
        document.getElementById('nums_1').innerHTML = '3'
    }
    if (nums == 3) {
        document.getElementById('garland').className = 'garland_3';
        document.getElementById('nums_1').innerHTML = '4'
    }
    if (nums == 4) {
        document.getElementById('garland').className = 'garland_4';
        document.getElementById('nums_1').innerHTML = '1'
    }
}

setInterval(function () {
    garland()
}, 600)