JSFiddle - React, Tailwind, and code Playground

HTML

<div id="arrow_block"></div>

CSS

#arrow_block {
      width: 26px;
      height: 70px;
    }

    .arrow1 {
      background: #000 url(https://psv4.vk.me/c812327/u377523965/docs/05dffd70cd62/sprite.png) no-repeat -27px 0px;
    }



    .arrow2 {
      background: #000 url(https://psv4.vk.me/c812327/u377523965/docs/05dffd70cd62/sprite.png) no-repeat -55px 0px;
    }

    .arrow3 {
      background: #000 url(https://psv4.vk.me/c812327/u377523965/docs/05dffd70cd62/sprite.png) no-repeat -83px 0px;
    }

    .arrow4 {
     background: #000 url(https://psv4.vk.me/c812327/u377523965/docs/05dffd70cd62/sprite.png) no-repeat -113px 0px;
    }
    .arrow5 {
     background: #000 url(https://psv4.vk.me/c812327/u377523965/docs/05dffd70cd62/sprite.png) no-repeat -139px 0px;
    }
    .arrow6 {
     background: #000 url(https://psv4.vk.me/c812327/u377523965/docs/05dffd70cd62/sprite.png) no-repeat -141px 0px;
    }

JavaScript

(function changeBg(currentNumber){
      currentNumber++;

      if(currentNumber >6){
        currentNumber = 1;
      }

      document.getElementById('arrow_block').setAttribute('class', 'arrow' + currentNumber);

      setTimeout(function(){
        changeBg(currentNumber)
      }, 300); 
    })(0);