按间隔更改元素类

Question

我得到了这个div，我必须间隔一定时间才能更改其类。我得到了4种不同的分类，应该以一定的间隔进行遍历。可以说，在3秒钟之后，它得到的类是“一”，在6秒钟之后，它得到的类是“二”，在9秒钟之后，它得到的是类“三”，等等。我认为最好在js中做到。你会怎么做？谢谢！

这是CSS和标记：

html

<div class="bg"></div>

css（scss）

.bg {
    position: relative;
    width: 100%;
    transition: all 0.3s linear;

    &:before {
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      content: '';
      background-size: contain; 
      background-position: right;
      background-repeat: no-repeat;
      transition: all 0.3s linear;
    }
    &.one {
      &:before {
        background-image: url(/static/img/shop1.png); 
      }
    }

    &.two {
      &:before {
        background-image: url(/static/img/shop2.png);
      }
    }

    &.three {
      &:before {
        background-image: url(/static/img/shop3.png);
      }
    }

    &.four {
      &:before {
        background-image: url(/static/img/shop4.png);
      }
    }
  }