Как сменить фон у DIV через определённый промежуток времени?

Question

[Георгий Степанов]

Здравствуйте, нужно написать код JS, который будет менять фон DIV'а каждый раз через промежуток времени. По возможности, нужен готовый пример или код, чтобы я мог разобраться.

Answer 1

[Михаил Горячкин]

Вот по быстрому накидал:
HTML:
<div class="wrapper"></div>
CSS:

body,html {
  width: 100%;
  height: 100%;
}

.wrapper {
  width: 100%;
  height: 100%;
  transition: background 1s;
  background: none;
}

JS:

(function (w, d) {
	w.onload = function () {
		var wp = d.querySelector('.wrapper'),
        colors = ['yellow', 'red', 'green', 'blue'],
        ln = colors.length;
    
    var changeColor = function (i) {
      if (i < ln) {
        setTimeout(function () {
          wp.style.cssText = "background: " + colors[i] +";"; 
          i++;
          changeColor(i);
        }, 2000);
      } else {
        changeColor(0);
      }
    };
    
    changeColor(0);
  };
}(window, document));

Это на чистом js, его легко можно заменить на jQuery.
Рабочий пример.

Comments

[Георгий Степанов]

Михаил Горячкин, Спасибо большое, я Вам очень благодарен.

[Михаил Горячкин]

Рад что смог помочь. Удачи)

[Георгий Степанов]

А можете сделать пример с изображениями?

[Михаил Горячкин]

Для того, чтобы вместо смены цветов были изображения вам надо в строчке colors = ['yellow', 'red', 'green', 'blue'] названия цветов заменить на пути к картинкам, а строчку wp.style.cssText = "background: " + colors[i] +";"; заменить на wp.style.cssText = "background: url(" + colors[i] +") 50% 50% no-repeat;";

[Георгий Степанов]

Спасибо большое.