Задать вопрос
@Sweeatygg
javascript

Как сделать смену картинки body с таймером без анимации?

Добрый день господа, нужна ваша помощь. Мне нужна помощь необходимо менять n-ное количество фонов для body через определённое время каждой картинки( все картинки с разным временем) . Я нашёл множество тем где есть готовые решение,но мне надо кое что другое - в тем решениях была анимация смены картинки, то есть там была анимация моргания белым цветом перед сменой картинки,а мне надо чисто смену картинки без визуальных анимаций. Очень прошу помочь почти неделю мучаюсь с этим вопросом.
  • Вопрос задан
  • 737 просмотров
3 комментария
Подписаться 2 Простой 3 комментария
Решения вопроса 1
TheShock
@TheShock
Будет менять по кругу все картинки из списка:

const pictures = [
	{ src: 'src1', delay: 1000 },
	{ src: 'src2', delay: 2000 },
	{ src: 'src3', delay: 3000 },
	{ src: 'src4', delay: 4000 },
]
let current  = 0;

function nextImage () {
  var img = new Image;
  img.src = pictures[current].src;
  img.onload = function () {
    document.body.style.backgroundImage = 'url(' + pictures[current].src + ')';

    current++;
    if (current >= pictures.length) current = 0;

    setTimeout(nextImage, pictures[current].delay);
  }
}

nextImage();
Ответ написан
3 комментария
3 комментария
Пригласить эксперта
Ответы на вопрос 2
@X0lera 
const list_pictures = [
  {
    img: 'img',
    counter: 0
  },
  {
    img: ''img,
    counter: 20000
  },
  {
    img: 'img',
    counter: 30000
  },
  {
    img: 'img',
    counter: 10000
  }
]

list_pictures.map( item => {
  setTimeout(() => 
    document.body.style.backgroundImage = `url(${item.img})`
  ,item.counter)
})
Ответ написан
5 комментариев
5 комментариев
@Sweeatygg Автор вопроса
//HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="pros">
  <div class="content__bg content__bg_img--0">
    
  </div>
</div>

/// JS
<script type="text/javascript">
var editBg = function(content__bg) {
  var contents__bg = $('.pros').find('.content__bg');
  contents__bg.animate({opacity: ''}, 500);
  setTimeout(function() {
    contents__bg.remove();
  }, 500);
  $('.pros').prepend($('<div class="content__bg '+content__bg+'"></div>'));
};
$(function() {
  setTimeout(function() {
    editBg('content__bg_img--1');
  }, 1000);
  setTimeout(function() {
    editBg('content__bg_img--2');
  }, 1400);
  setTimeout(function() {
    editBg('content__bg_img--3');
  }, 1800);
  setTimeout(function() {
    editBg('content__bg_img--4');
  }, 2200);
  setTimeout(function() {
    editBg('content__bg_img--5');
  }, 2400);
});
</script>

// CSS
<style type="text/css">

.content__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  pointer-events: none;
}
.content__bg_img--0 {background-image: url('assets/img/bg1.1.jpg')}
.content__bg_img--1 {background-image: url('assets/img/bg1.1.jpg')}
.content__bg_img--2 {background-image: url('assets/img/bg1.2.jpg')}
.content__bg_img--3 {background-image: url('assets/img/bg1.3.jpg')}
.content__bg_img--4 {background-image: url('assets/img/bg1.4.jpg')}
.content__bg_img--5 {background-image: url('assets/img/bg2.jpg')}


</style>
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Fullstack
OnClass
от 200 000 до 600 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Повысить оригинальность работы с 14% до 70%
25 апр. 2024, в 23:14
1600 руб./за проект
Доработать приложение - интегрировать виджет TODOs
25 апр. 2024, в 22:44
5000 руб./за проект
Доделать проект - расширение для Whatsapp (Chrome)
25 апр. 2024, в 22:33
15000 руб./за проект
Ещё заказы