Форум

K_PECT · #1 (**permalink**) 22.12.2015, 22:50

Всем привет!
Нужна функция плавной зацикленной смены backgroundImage.
Сейчас использую смену css классов:

setInterval(function() {
    var $body = $('body');
    if($body.hasClass('background1'))
    {
        $body.removeClass('background1');
        $body.addClass('background2');
    }
    else {        
        $body.removeClass('background2');
        $body.addClass('background1');
    }
}, 8000);

Может мне кажется, но она сильно нагружает браузер и плавность смены изображений не работает в IE.
Если не трудно покажите как подобное можно сделать на JS, может без использования классов, а через document.body.style.backgroundImage = "url('..')"
Спасибо откликнувшимся!

Decode · #2 (**permalink**) 22.12.2015, 23:20

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <style>
    html, body {
      height: 100%;
    }
  </style>
</head>
<body>
  <script>
    var colors = ['red', 'green', 'blue', 'grey', 'orange'],
        i = 0;

    setInterval(function() {
      document.body.style.background = colors[++i % colors.length];
    }, 2000)
  </script>
</body>
</html>

K_PECT, только вместо цветов, урлы картинок в массив вставь.

K_PECT · #3 (**permalink**) 22.12.2015, 23:56

Очень помогли! Спасибо большое! Но как быть с плавностью? Если не трудно покажите на setTimeout

Decode · #4 (**permalink**) 23.12.2015, 00:16

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <style>
    html, body {
      height: 100%;
    }
    
    body {
      -webkit-transition: background 1s linear;
      -moz-transition: background 1s linear
      transition: background 1s linear;
    }
  </style>
</head>
<body>
  <script>
    var colors = ['red', 'green', 'blue', 'grey', 'orange'],
        i = 0;

    setTimeout(function foo() {
      document.body.style.background = colors[++i % colors.length];
      setTimeout(foo, 2000)
    }, 2000)
  </script>
</body>
</html>

K_PECT · #5 (**permalink**) 23.12.2015, 00:27

Не знаю мож это у меня так, но IE11 видимо не поддерживает
background 1s linear;

ruslan_mart · #6 (**permalink**) 23.12.2015, 00:30

K_PECT, как вариант, наложить два img и им уже менять opacity.

K_PECT · #7 (**permalink**) 23.12.2015, 00:49

Ruslan_xDD, не дойду сам! Покажите, пожалуйста

ruslan_mart · #8 (**permalink**) 23.12.2015, 01:41

https://jsfiddle.net/wteerd4t/

K_PECT · #9 (**permalink**) 23.12.2015, 09:15

transition: background 1s linear;
-webkit-transition: background 1s linear;
-moz-transition: background 1s linear;
-ms-transition: background 1s linear;

Не работает в IE
Вот этот пример работает в IE. Покажите, пожалуйста, как собрать на основании него смену document.body.style.background
И если не трудно на setTimeout
Необходимо менять изображение у body

ruslan_mart · #10 (**permalink**) 23.12.2015, 10:21

K_PECT, чем мой пример выше не устроил, если не секрет?

Форум

Справочник

Discord чат

Курсы javascript