Как сменить изображения src автоматически

Question

Я пытаюсь закодировать последовательность светофора, которая будет автоматически проходить через изображения. Однако у меня небольшая проблема с автоматическим изменением. Не могли бы вы помочь, если я ошибаюсь?

var images = ["red.png", 
"redamber.png", 
"orange.png", 
"green.png"]; 
setTimeout("changelight()",1000); 
var index = 0; 

function changeImage() 
{ 
document.getElementById("img").src= images[0]; 
} 

Answer 1

Please check the Fiddle

Попробуйте

var index = 0; 
function changeImage() 
{ 
if (index > 3) index = 0; 
document.getElementById("img").src= images[index]; 
index++; 
} 

var images = ["red.png", 
"redamber.png", 
"orange.png", 
"green.png"]; 
setInterval(changeImage,1000); 

Answer 2

Вы, вероятно, предназначен document.getElementById("img").src= images[индекс];

И убедитесь, что индекс обновляется

Answer 3

Вы были в основном там, но было несколько мелочей.

Во-первых, вы вызывали функцию под названием changeLight, но функция была вызвана changeImage. Вам также необходимо изменить атрибут источника изображения на images[index], а затем увеличить это значение каждый раз.

index = (index + 1) % 4; Линия добавляет 1 к индексу, но только позволит ему получить как 3. Если он достигает 4, то % 4 в конце будет установить его на 0.

Для справки см the remainder description on this page

Вы также использовали setTimeout который работает только один раз. Если вы используете setInterval, он работает точно так же, но повторяет.

var images = ["red.png", 
    "redamber.png", 
    "orange.png", 
    "green.png"]; 

setInterval(changeLight, 1000); 

var index = 0; 

function changeLight() { 
    document.getElementById("img").src = images[index]; 
    index = (index + 1) % 4; 
} 

Единственная вещь, которая может быть проблема в том, что я не знаю, если изображение на самом деле имеет идентификатор img. Если это не так, вам нужно добавить это.

Answer 4

var images = ["red.png", "redamber.png", "orange.png", "green.png"]; 
setTimeout("changelight()",1000); 
var index = 0; 

function changeImage() 
{ 
    index = (index + 1) % 4; 
    document.getElementById("img").src= images[index]; 
} 

Answer 5

Вы сделали некоторые типичные ошибки начинающих:

1. Ваш function name не связанные с the one in the timer.
2. Возможно, вы захотите interval вместо single timeout.
3. Чтобы выбрать тег DOM, вы должны использовать querySelector.
4. Чтобы пройти через array, вы должны использовать переменную increment в сочетании с контрольной точкой if.

Пожалуйста, прочтите ДИЗКН:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide

var images = ["red.png", "redamber.png", "orange.png", "green.png"]; 
var index = 0; 

setInterval(function(){ 
    document.querySelector("img").src= images[index]; 
    /* common - easy to understand - way: 
    if (index > images.length - 1) index = 0; 
    ... 
    index++; 
    */ 
    index = index == images.length - 1 ? index = 0 : index + 1 // casual way - toggle bool - 
    console.log(index); 
}, 1000); 

Пример: https://jsfiddle.net/27jygopz/