Смена backgroundImage
Всем привет!
Нужна функция плавной зацикленной смены 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('..')" Спасибо откликнувшимся! |
<!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, только вместо цветов, урлы картинок в массив вставь. |
Очень помогли! Спасибо большое! Но как быть с плавностью? Если не трудно покажите на setTimeout
|
<!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>
|
Не знаю мож это у меня так, но IE11 видимо не поддерживает
background 1s linear; |
K_PECT, как вариант, наложить два img и им уже менять opacity.
|
Ruslan_xDD, не дойду сам! Покажите, пожалуйста
|
|
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 |
K_PECT, чем мой пример выше не устроил, если не секрет?
|
| Часовой пояс GMT +3, время: 05:22. |