Нужно запустить один html элемент за другим. Типа ротатор рекламы. Методом замены классов

Question

По условиям задачи, есть такой код:

Нужно методом добавления и убирания классов создать эффект ротации содержимого.

"use strict";

const getAllRotationsClasses = document.querySelectorAll(".rotator__span");

const rotation = function() {
  getAllRotationsClasses.forEach(function(elem) {
    if (elem.classList.contains("rotator__span")) {
      elem.classList.toggle("rotator__span__active");
    }
  });
}

setInterval(rotation, 1000)

.rotator__span {
  display: none;
}

.rotator__span__active {
  display: inline;
}

<div>
  <p>
    Я
    <span class="rotation">
                <span class="rotator_span rotator__span_active">учу JS</span>
    <span class="rotator__span">краб</span>
    <span class="rotator__span">покорю этот мир</span>
    <span class="rotator__span">не сдамся</span>
    <span class="rotator__span">упрямый</span>
    <span class="rotator__span">добьюсь своей цели</span>
    </span>
  </p>
</div>

И этот код выбирает все не активированные, выводит их на экран в строку и убирает, а мне надо одну за другой. Как это реализовать? Объясните, пожалуйста крабу))

Answer 1

Ну например так:

"use strict";

const getAllRotationsClasses = document.querySelectorAll(".rotation span");
let count = 1;

const rotation = function() {

  getAllRotationsClasses.forEach(function(elem, index) {
    elem.classList.toggle("rotator__span", count !== index);
  });

  count++;
  if (count >= getAllRotationsClasses.length) {
    count = 0;
  }
}

setInterval(rotation, 1000);

.rotator__span {
  display: none;
}

.rotator__span__active {
  display: inline;
}

<div>
  <p>
    Я
    <span class="rotation">
                <span class="">учу JS</span>
    <span class="rotator__span">краб</span>
    <span class="rotator__span">покорю этот мир</span>
    <span class="rotator__span">не сдамся</span>
    <span class="rotator__span">упрямый</span>
    <span class="rotator__span">добьюсь своей цели</span>
    </span>
  </p>
</div>

БЛОГ НА HUSL

Нужно запустить один html элемент за другим. Типа ротатор рекламы. Методом замены классов

Ответы (1 шт):