Как сменить background-image по таймеру?

Question

[Minat0_]

Доброе время суток, заголовок отражает суть проблемы. Кажется, что ответ где-то на поверхности, но я, видимо, слеп для этого. Помогите, пожалуйста. :)

var bg = ["img/background.jpg", "img/background_2.jpg"];
    var timer = setInterval(function () {
            for (var i=0; i < bg.length; i++) {
                var s = document.getElementById('main').style;
                s.backgroundImage = 'url('+bg[i]+')';
            }
        }, 2000);

Answer 1

[Алексей Лауд]

var bg = ["img/background.jpg", "img/background_2.jpg"];
var index = 0;

var timer = setInterval(() => {
    var s = document.getElementById('main').style;
    s.backgroundImage = 'url('+bg[index++ % bg.length]+')';
}, 2000);

Пояснение:
Раз в 200 миллисекунд вызывается эта функция:

() => {
    var s = document.getElementById('main').style;
    s.backgroundImage = 'url('+bg[index++ % bg.length]+')';
}

Мы увеличиваем счетчик:
index++

Берем остаток от деления на длину массива (в данном случае 2):
index++ % bg.length

Получаем индекс фона, который при увеличении счетчика будет таким:

index, index % 2
0        0
1        1
2        0
3        1
И так далее

Когда вы добавите в массив элементы, то таким:

index, index % 2
0        0
1        1
2        2
3        0
4        1
5        2
И так далее

Comments

[Алексей Лауд]

Почему не работал ваш вариант -- вы каждые две секунды пытались менять фон не на следующий, а проходили по всем фонам, из-за чего значение каждый раз было одинаковым.

Answer 2

[Юрий Есин]

На сколько я помню, в нативном js стиль у элемента идет как обычный string, а не словарь. Попробуйте поменять это
s.backgroundImage = 'url('+bg[i]+')';
на вот это
s += "background-image: url("+bg[i]+");";

Comments

[Minat0_]

Не работает.

[Юрий Есин]

да, и еще, от цикла избавьтесь вообще, он не нужен. У вас и так уже таймер крутится как цикл:

var bg = ["img/background.jpg", "img/background_2.jpg"];
var i = 0;

var timer = setInterval(function () {
    if (i >= bg.length) {
        i = 0;
    }

    document.getElementById('main').style += "background-image: url("+bg[i]+");";
    i++;
}, 2000);