How to change the pictures of the body with a timer without animation?

0 like 0 dislike
97 views
Good day gentlemen, need your help. I need help, you need to change the n-Noe number of backgrounds for the body after a certain time of each picture( all the pictures with different time) . I found many topics where there is a ready solution,but I need something else in those decisions was the animation change of image, that is, there was the animation of the blinking white before changing pictures,and I needed a clean change of pictures without visual animations. Please help almost a week I am suffering with this issue.
asked by | 97 views

3 Answers

0 like 0 dislike
Will change in a circle all the pictures from the list:

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();
answered by
0 like 0 dislike
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) })
answered by
0 like 0 dislike
//HTML
\r\r\r\r\r\r

/// JS
\rvar editBg = function(content__bg) {\rvar contents__bg = $('.pros').find('.content__bg');\rcontents__bg.animate({opacity: ''}, 500);\rsetTimeout(function() {\rcontents__bg.remove();\r}, 500);\r$('.pros').prepend($(''));\r};\r$(function() {\rsetTimeout(function() {\reditBg('content__bg_img--1');\r}, 1000);\rsetTimeout(function() {\reditBg('content__bg_img--2');\r}, 1400);\rsetTimeout(function() {\reditBg('content__bg_img--3');\r}, 1800);\rsetTimeout(function() {\reditBg('content__bg_img--4');\r}, 2200);\rsetTimeout(function() {\reditBg('content__bg_img--5');\r}, 2400);\r});\r

// CSS
\r\r.content__bg {\rposition: absolute;\rtop: 0;\rleft: 0;\rwidth: 100%;\rheight: 100%;\rbackground-size: 100% 100%;\rpointer-events: none;\r}\r.content__bg_img--0 {background-image: url('assets/img/bg1.1.jpg')}\r.content__bg_img--1 {background-image: url('assets/img/bg1.1.jpg')}\r.content__bg_img--2 {background-image: url('assets/img/bg1.2.jpg')}\r.content__bg_img--3 {background-image: url('assets/img/bg1.3.jpg')}\r.content__bg_img--4 {background-image: url('assets/img/bg1.4.jpg')}\r.content__bg_img--5 {background-image: url('assets/img/bg2.jpg')}\r\r\r
answered by

Related questions

0 like 0 dislike
1 answer
asked Oct 18, 2018 by elenapetrova1995
0 like 0 dislike
1 answer
0 like 0 dislike
3 answers
0 like 0 dislike
2 answers
24,509 questions
45,931 answers
0 comments
308 users