如何让一系列元素一次只显示一个

Question

我试图让我的span元素agencyText一次出现一个。然后，在间隔的末尾，将应用curr和next类，以正确定位要显示的当前文本和下一个文本。

截至目前，我一次将它们全部显示出来。我用数据属性索引值创建了它们。但是，我不确定如何遍历它们以使其正常工作。

如果您单击此链接，则有一个我正尝试执行的操作的左侧示例。它是文本旋转90度。每四秒钟更新一次措辞。

有谁知道我如何修改我的代码以复制它？

UPDATE-显示示例的DOM代码。

var arr = $('.textContainer');

var arrLen = arr.length;

var i = 0;

var attr = $('agencyText').data('index');

var loop = function() {   

  var item = arr.eq(i);

  var description = item.find('.agencyText');

  description.addClass('curr');

  i = (i + 1) % arrLen;

};

loop();

setInterval(loop, 3000);

.digitalAgency {

    height: 20px;

    position: fixed;

    top: 50%;

    left: -45%;

    width: 100%;

    text-transform: uppercase;

    font-weight: 700;

    font-size: 14px;

    letter-spacing: 1px;

  -webkit-transition: opacity .5s;

    -o-transition: opacity .5s;

    transition: opacity .5s;

  -webkit-transition:opacity .5s;

  -o-transition:opacity .5s;

  transition:opacity .5s;

}

.digitalAgency .textContainer::before {

  content: "";

  position: absolute;

  width: 40px;

  height: 1px;

  background: #000;

  display: inline-block;

  top: 50%;

  margin-right: 20px;

  left: 33%;

}

.digitalAgency .textContainer {

    position: relative;

    width: 650px;

    height: 100%;

    left: 50%;

    -webkit-transform: translateX(-50%) rotate(-90deg);

    -ms-transform: translateX(-50%) rotate(-90deg);

    transform: translateX(-50%) rotate(-90deg);

    display: inline-block;

}

.digitalAgency, .agencyText {

    -webkit-animation-duration: .45s;

    animation-duration: .45s;

    -webkit-animation-fill-mode: forwards;

    animation-fill-mode: forwards;

    -webkit-animation-timing-function: ease-in-out;

    animation-timing-function: ease-in-out;

}

.digitalAgency .textContainer .agencyText {

    padding-left: 60px;

    position: absolute;

    visibility: hidden;

    width: 100%;

    height: 100%;

    left: 33%;

}

.digitalAgency .textContainer .agencyText.curr {

  visibility: visible;

}