Скрипт автоматически меняющий цвет текста

Question

друзья.

У меня есть аналогичный блок но не знаю как задать или найти решение.Прошу помочь с решением.

Answer 1

Не сразу понял вопроса, немного запутанно написали, такое решение вас устроит?:

setInterval(() => {
  let active = document.querySelector('.active')
  let first = document.querySelector('span')
  if(!active) {
    first.classList.add('active')
  } else {
    if(document.querySelector('.active + span')) {
      active.nextElementSibling.classList.add('active')
      active.classList.remove('active')
    } else {
      active.classList.remove('active')
      first.classList.add('active')
    }
  }
}, 1e3)

.active {
  color: purple;
}

<span>Текст 1</span>
<span>Текст 2</span>
<span>Текст 3</span>
<span>Текст 4</span>

Вставьте этот код в сайт:

let spans = [...document.querySelectorAll('.elementor-widget-wrap.elementor-element-populated > .elementor-element.elementor-widget__width-initial.elementor-widget.elementor-widget-heading > div > span')],
  index = 0

setInterval(() => {
  let active, first = spans[0]
  spans.forEach((e, i) =>  {
    if(e.classList.contains('active')) {
      active = e
      index = i
    }
  })
  if(!active) {
    first.classList.add('active')
  } else {
    if(spans[index+1]) {
      spans[index+1].classList.add('active')
      active.classList.remove('active')
    } else {
      active.classList.remove('active')
      first.classList.add('active')
    }
  }
}, 1e3)

Не забудьте про стили!:

.active {
  color: rgb(205, 0, 255);
}

Answer 2

Можно использовать CSS-анимацию:

.hl {
  animation: switch 4s step-start infinite;
}

.hl:nth-child(2) { animation-delay: 1s; }
.hl:nth-child(3) { animation-delay: 2s; }
.hl:nth-child(4) { animation-delay: 3s; }

@keyframes switch {
  25% { color: red; }
}

<span class="hl">First</span>
<span class="hl">Second</span>
<span class="hl">Third</span>
<span class="hl">Fourth</span>

Свой вариант на JS также приведу:

const spans = document.querySelectorAll('.hl');
let curIdx = 0;

setInterval(() => {
  spans[curIdx].classList.toggle('active');
  curIdx = ++curIdx % spans.length;
  spans[curIdx].classList.toggle('active');
}, 1000);

.active {
  color: red;
}

<span class="hl active">First</span>
<span class="hl">Second</span>
<span class="hl">Third</span>
<span class="hl">Fourth</span>

БЛОГ НА HUSL

Скрипт автоматически меняющий цвет текста

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

Вставьте этот код в сайт:

Не забудьте про стили!: