Эффект светофора. Поочередная смена цвета элементов

Question

Есть 4 блока, по задумке цвет каждую 1 секунду должен двигаться вниз по четырём блокам, как на светофоре.

То есть: 1-блок(синий), затем цвет сбрасывается до первоначального, > 2-блок(красный), сброс цвета > 3-блок(синий), сброс цвета, 4-блок(красный) сброс цвета и так по кругу. Но я смог проделать это с первым блоком. Как такую задумку применить ко всем четырём блокам?
Чтобы получить эффект светофора.

let a = document.querySelector('.item');

const colorMenu = [
{name: 'blue', interval: 1000},
{name: '', interval: 1000},
{name: 'red', interval: 1000},
{name: '', interval: 1000}
];

let count = 0;

let go = setTimeout(function change() {
if (count === colorMenu.length) {
count = 0;
}

a.style.background = colorMenu[count].name;
go = setTimeout(change,colorMenu[count].interval );
count = count + 1;
 
},1000);

body{   
user-select:none;
}

.main{

margin-left:200px;  
width:250px;
height: 100px;  
background: blue;
}

.item{
height: 100%;   
background: gray;   
margin-bottom: 30px;
}

<div class = "main">
<div class = "item" data-color='red'>1</div>
<div class = "item" data-color='blue'>2</div>
<div class = "item" data-color='orange'>3</div>
<div class = "item" data-color='gold'>4</div>
</div>

Answer 1

Вам в комментариях правильно подсказали, тут надо использовать querySelectorAll, чтобы получить коллекцию элементов.

let a = document.querySelectorAll('.item');
const colorMenu = [
  {name: 'red', interval: 1000},
  {name: 'blue', interval: 2000},
  {name: 'orange', interval: 500},
  {name: 'gold', interval: 1500}
];
let count = 0;
let go = setTimeout(function change() {
  if (count === a.length) {
  count = 0;
}   
  a.forEach(item => item.style.background = '');
  //можно цвет брать из дата атрибутов
  //a[count].style.background = a[count].dataset.color;  
  a[count].style.background = colorMenu[count].name;  
  let go = setTimeout(change,colorMenu[count].interval);
  count++; 
},1000);

body{   
user-select:none;
}

.main{

margin-left:200px;  
width:250px;
height: 100px;  
background: blue;
}

.item{
height: 100%;   
background: gray;   
margin-bottom: 30px;
}

<div class = "main">
<div class = "item" data-color='red'>1</div>
<div class = "item" data-color='blue'>2</div>
<div class = "item" data-color='orange'>3</div>
<div class = "item" data-color='gold'>4</div>
</div>

Answer 2

Это вполне можно сделать с помощью css:

div {
  animation: color-34 4s step-end infinite;
  width: 2em;
  line-height: 2em;
  text-align: center;
  border-radius: 50%;
  margin: 0 auto .25em;
}

@keyframes color-34 {
  from { background-color: var(--color); }
  25%  { background-color: silver; }
}

<div style="                     --color:red;   ">1</div>
<div style="animation-delay:-3s; --color:blue;  ">2</div>
<div style="animation-delay:-2s; --color:orange;">3</div>
<div style="animation-delay:-1s; --color:gold;  ">4</div>

БЛОГ НА HUSL

Эффект светофора. Поочередная смена цвета элементов

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